Keep getting error "THREE.WebGLRenderer: Context Lost" in my React Three Fiber Project

I'm making a school project for the scale of different planets and for now im making an MVP for the app.

I get no error when I remove the Slider component but when it is there it reports the error. This is my code for reference. The slider component is from ShadCN, I just need to know how to fix the error. Nothing seems to be deprecated and my computer can run Three.js examples just fine

function Sphere({ planet, position, speedMultiplier }: sphereProps) {
  const [hovered, setHover] = useState(false);
  // useLoader is safe and memoized, which helps performance
  const textureMap = useLoader(THREE.TextureLoader, planet.texture);

  let speed: number = 1; // Changed 'var' to 'let'
  if (planet.speed != null) {
    speed = 1.0 / planet.speed;
  }

  const mesh = useRef<THREE.Mesh | null>(null);

  useFrame(() => {
    // Ensure mesh.current exists before trying to access properties
    if (mesh.current) {
      mesh.current.rotation.y += speedMultiplier * speed;
    }
  });

  const radius = planet.diameter / 2;

  return (
    <mesh
      position={position}
      onPointerOver={() => { setHover(true); }}
      onPointerLeave={() => { setHover(false); }}
      ref={mesh}
    >
      <sphereGeometry args={[radius, 32, 32]} />
      <meshStandardMaterial
        map={textureMap}
        color={hovered ? "lightgray" : "white"}
      />
    </mesh>
  );
}


function ContextLossHandler() {
  const { gl } = useThree();

  useEffect(() => {
    const canvas = gl.domElement;

    const handleContextLost = (event: Event) => {
      event.preventDefault();
      console.warn('WebGL context lost. Attempting to restore...');
    };

    const handleContextRestored = () => {
      console.log('WebGL context restored successfully.');
    };

    canvas.addEventListener('webglcontextlost', handleContextLost);
    canvas.addEventListener('webglcontextrestored', handleContextRestored);

    return () => {
      canvas.removeEventListener('webglcontextlost', handleContextLost);
      canvas.removeEventListener('webglcontextrestored', handleContextRestored);
    };
  }, [gl]);

  return null;
}



export default function Compare() {
  // Define planet objects (keeping them outside the render for consistency)
  const EARTH_DIAMETER = 12.742;
  const MOON_DIAMETER = 3.4748;
  
  // Removed isContextLost state and related logic to fix the typing error (2322)
  const [speedMultiplier, setSpeedMultiplier] = useState<number[]>([0.00005])

  const earthPlanet: Planet = useMemo(() => ({ texture: earth_texture, diameter: EARTH_DIAMETER, speed: 1 }), [EARTH_DIAMETER]);
  const comparisonPlanet: Planet = useMemo(() => ({ texture: earth_texture, diameter: 0.25 }), []);
  const moon: Planet = useMemo(() => ({ texture: moon_texture, diameter: MOON_DIAMETER, speed: 29.5 }), [MOON_DIAMETER]);
  const speed = speedMultiplier[0];

  return (
    <div className="hello-world">
      <div className="controls-container">
        <h1 className="text-2xl"> Compare the sizes of planets </h1>
        
        <Slider
          value={speedMultiplier}
          min={0.00005}
          max={1}
          step={0.00001}
          onValueChange={setSpeedMultiplier}
          className="w-[400px] mb-4 slider-isolated"
        />
      </div>

      <Canvas
        className="canvas-isolated"
        camera={{ position: [0, 0, 15], fov: 75 }}
        gl={{ 
          antialias: true, 
          powerPreference: "high-performance", 
          alpha: false,
          preserveDrawingBuffer: true,
          failIfMajorPerformanceCaveat: false
        }}
        dpr={[1, 2]}
      >
        <ContextLossHandler />
        <ambientLight intensity={1.25} />
        <directionalLight position={[10, 10, 5]} intensity={3} />

        <Sphere planet={earthPlanet} position={[-1.5, 0, 0]} speedMultiplier={speed} />
        <Sphere planet={moon} position={[12, 0, 0]} speedMultiplier={speed} />
        <Sphere planet={comparisonPlanet} position={[1.5, 0, 0]} speedMultiplier={speed} />
      </Canvas>
    </div>
  );
}