SVG filter base frequency attribute animates well on desktop but not on mobile

Question

I'm using react and gsap. I have 3 elements that are animating using gsap out of which 2 are svg filter attr. This works amazingly on desktop where the values change nicely and smoothly. On mobile however the base frequency of the "filter ref" seems to have no affect on the distortion. I'm animating the base frequency values specifically. On mobile the animation should trigger on touch start. You can see the difference on this live site - https://keem-desktop.netlify.app

I'm not sure if it's my values or not but when i do try a dev tools responsive mode on the desktop I can see the values distorting? I have another element whose ref is "textRef" that does seem to distort a little on mobile.

If you have any opinions, suggestions, insight do tell !

here is my (some) of APP.JS

import './App.css'
import React, { useRef, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";
import { gsap, Power4 } from "gsap";


const App = () => {

   const isMobile = window.innerWidth <= 576; // Adjust the threshold as needed
  
  const [mousePosition, setMousePosition] = useState([0, 0]);
  const [prevMousePosition, setPrevMousePosition] = useState([0, 0]);
  const [currentTime, setCurrentTime] = useState(0);
  
  const mainRef = useRef(null);
  const filterRef = useRef(null)
  const textRef = useRef(null)


  const glitchAnimDesktop = gsap.timeline({
     repeat: 0, 
     paused: true
   });

   glitchAnimDesktop.fromTo(filterRef.current, { attr: { baseFrequency: "0 0" }}, {  attr: { baseFrequency: "0.05 0.007" }, ease: Power4.easeInOut, duration: 1, delay: 2, yoyo:false })
   glitchAnimDesktop.fromTo(textRef.current, { attr: { scale: "0", baseFrequency: "0 0" }}, {  attr: { scale: "90", baseFrequency: "0.05 0.007" }, repeat: 0, duration: 0.8, ease: Power4.easeInOut, yoyo: false })
   glitchAnimDesktop.fromTo(mainRef.current, { filter: 'blur(10px) contrast(1) invert(0)' }, {  filter: 'blur(10px) contrast(10) invert(1)', yoyo:true, duration: 0.1, repeat:5, delay:-1 })


  const handleTap = () => {
      if (isMobile) {
         glitchAnimDesktop.fromTo(filterRef.current, { attr: { baseFrequency: "0" }}, {  attr: { baseFrequency: "0.2 0.08" }, ease: Power4.easeInOut, duration: 1, delay: 2, yoyo:false })
         glitchAnimDesktop.fromTo(textRef.current, { attr: { scale: "0", baseFrequency: "0 0" }}, {  attr: { scale: "5", baseFrequency: "0.05 0.007" }, duration: 0.8, ease: Power4.easeInOut, yoyo: true })
         glitchAnimDesktop.fromTo(mainRef.current, { filter: 'blur(10px) contrast(1) invert(0)' }, {  filter: 'blur(12px) contrast(10) invert(1)', yoyo:true, duration: 0.1, repeat:5, delay:-1 })
         glitchAnimDesktop.play()
   }};

   const handleMouseSpeed = (speed) => {
      if (speed > 0.018)  {
         glitchAnimDesktop.play()
      } else {
         glitchAnimDesktop.pause()
      }
    };

  return (
    <>
      <div onMouseMove={onMouseMove} onTouchStart={handleTap}>
            <p className='diction'> Learning... </p>
        <main
          ref={mainRef}
          style={{background: '#BABABA'}}>
          <Canvas
            style={{ background: "rgba(0, 0, 0, 0)", filter: 'url(#distort)' }}
            camera={{ position: [0, 0, 150] }}>
               <ambientLight intensity={.5} />
               <pointLight position={[0, 0, -50]} intensity={5} />
            <Suspense fallback={null}>     
          <mesh>
              <boxGeometry args={[1, 1, 1]} />
              <meshBasicMaterial color={'red'} />
            </mesh>
            </Suspense>
          </Canvas>
        </main>
      </div>
      <svg version="1.1" height="0" width="0">
        <defs>
         <filter id='wave'>
            <feTurbulence
               type="turbulence"
               baseFrequency="0.05"
               numOctaves="2"
               result="turbulence" />
                <feDisplacementMap ref={textRef}
               in2="turbulence"
               in="SourceGraphic"
               scale="00"
               xChannelSelector="R"
               yChannelSelector="G">
             </feDisplacementMap>
         </filter>
          <filter id="distort">
            <feTurbulence ref={filterRef}
               type="turbulence"
               baseFrequency="0 0"
               numOctaves="2"
               result="turbulence" />
            <feDisplacementMap
               in2="turbulence"
               in="SourceGraphic"
               scale={scaleFactor}
               xChannelSelector="R"
               yChannelSelector="G" />
         </filter>
        </defs>
      </svg>
    </>
  );
};

export default App;