Issue with Facebook Pixel in NextJS Website

Question

I am working on a website build with NextJS. I have added the Pixel to my website, but the pixel is not working correctly. I have added the below code to my _app.tsx also tried placing the code in [[...pages ]]

<Script
        id="fb-pixel"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '602606363244718');
              fbq('track', 'PageView');
          `,
        }}
/>

I have also tried with

useEffect(() => {
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init('XXXXXXXXXXXXXXXXXXXXX') // facebookPixelId
        ReactPixel.pageView()

        router.events.on('routeChangeComplete', () => {
          ReactPixel.pageView()
        })
      })
  }, [router.events])

I have added Google Analytics and Messanger Chat plugins those are working fine, only the Facebook Pixel is not working.

But, sometimes the pixel activates, and sometimes not. Can Does anybody help me with that?