SVG filter turbulence will work on p element but not on div

Question

(works on chrome desktop but not mobile and doesn't work on safari)

I have SVG turbulence filter applied to a p element and a div. I am animating it using GSAP specifically base frequency and scale. This depends on mouse speed. It works perfectly on chrome on both the elements but only works on the p element in safari. In mobile it doesn't work on either. here is the full live site to test : Glitch Site

I'm using react with gsap. when the mouse speed is high, the animation triggers and on mobile if you tap the screen the animation triggers. i've kept the code that relates to this. When you open the log on the live site you can see the values of the base frequency and scale are changing. The filter just won't apply to the canvas div element?

any leads as to why this is happening ??

APP JS

    const App = () => {
    
      const distortBF = useRef(null);
      const distortSCL = useRef(null);
      const waveBF = useRef(null);
      const waveSCL = useRef(null);
    
      const handleTap = () => {
             gsap.fromTo(distortBF.current, { attr: { baseFrequency: "0 0" }}, { attr: { baseFrequency: "0.2 0.08" }, duration: 1, ease: 'ease', yoyo:true }); 
             gsap.fromTo(distortSCL.current, { attr: { scale: "0" }}, { attr: { scale: "90" }, duration: 1, ease: 'ease', yoyo:true })
             gsap.fromTo(waveBF.current, { attr: { baseFrequency: "0" }}, {  attr: {baseFrequency: "0.2 0.08" }, duration: 1 })
             gsap.fromTo(waveSCL.current, { attr: { scale: "0" }}, {  attr: { scale: "10" }, duration: 1 })
       };
   
   const onMouseMove  = () => {
      glitchOut(mouseSpeed)
    }
    
        function glitchOut() {
          gsap.fromTo(distortBF.current, { attr: { baseFrequency: "0 0" }}, { attr: { baseFrequency: "0.2 0.08" }, duration: 1, ease: 'ease', yoyo:true }); 
          gsap.fromTo(distortSCL.current, { attr: { scale: "0" }}, { attr: { scale: "90" }, duration: 1, ease: 'ease', yoyo:true })
          gsap.fromTo(waveBF.current, { attr: { baseFrequency: "0" }}, {  attr: {baseFrequency: "0.2 0.08" }, duration: 1 })
          gsap.fromTo(waveSCL.current, { attr: { scale: "0" }}, {  attr: { scale: "10" }, duration: 1 })
          }
      return (
        <>
          <div onMouseMove={onMouseMove} onTouchStart={handleTap}>
        
                <p className='diction'
                style={{ filter: 'url(#distort)' }}
                >
            'Learning...'
          </p>
            <main
              ref={mainRef}
              style={{background: '#BABABA'}}>
              <Canvas camera={{ position: [0, 0, 150] }} style={{ filter: 'url(#distort)' }}>
                   
                <Eyes mousePosition={mousePosition} deviceOrientation={null} />
              </Canvas>
            </main>
          </div>
          <svg version="1.1" height="0" width="0">
            <defs>
             <filter id='wave'>
                <feTurbulence ref={waveBF}
                   type="turbulence"
                   baseFrequency="0.05"
                   numOctaves="2"
                   result="turbulence" />
                    <feDisplacementMap ref={waveSCL}
                   in2="turbulence"
                   in="SourceGraphic"
                   scale="00"
                   xChannelSelector="R"
                   yChannelSelector="G">
                 </feDisplacementMap>
             </filter>
              <filter id="distort">
                <feTurbulence ref={distortBF}
                   type="turbulence"
                   baseFrequency="0 0"
                   numOctaves="2"
                   result="turbulence" />
                <feDisplacementMap ref={distortSCL}
                   in2="turbulence"
                   in="SourceGraphic"
                   scale="1"
                   xChannelSelector="R"
                   yChannelSelector="G" />
             </filter>
            </defs>
          </svg>
        </>
      );
    };
    
    export default App;