react-gtm-module ReferenceError: $ is not defined

I am trying to add GTM with the react-gtm-module to my nextjs'app but i get the error "ReferenceError: $ is not defined".

i tried to use the normal method without the module and i got the same error.

here is my code :

my _app.js

import React, { useEffect } from 'react';
import TagManager from 'react-gtm-module' 

export default function MyApp({ Component, pageProps }) {
  

  useEffect(() => {
      TagManager.initialize({ gtmId: 'GTM-XXXXXX' });
}, [])


  return 
    <>
        <Component {...pageProps}  />
    </>
   

}

the error i get :

$_is_not_defined

I really appreciate the help.