I am working on a Next.js web-app where I create a simple canvas animation for hero section. The animation is working fine in Chrome but lagging in Firefox. The code is very optimized and I am using requestAnimationFrame.

const canvas = canvasRef.current;

useEffect(()=>{
  if(canvas){
   // Animation Codes
  }
}, [])

I have used same canvas animation in a basic html,css,js project where it is working fine in Firefox but lagging when using next.js. Is there any to resolve the lagging issue for Firefox browser?