Failed to execute 'requestAnimationFrame' on 'Window' when storing zoom level in state

I get this error when i use the onZoomChange to store the current zoom level in my components state. this is an extract of my code, if i comment out the setZoom() statement below it works fine again.

    ....
    const [zoom, setZoom] = useState<number>();
    const zoomChange = ({ scale }) => {
        console.log('zoom', scale);
        setZoom(scale);
    };

    return (
        <SelectionProvider>
            <TransformWrapper {...opts} onZoomChange={zoomChange}>
                {({ zoomIn, zoomOut, resetTransform }) => (
                    <>
                        <TransformComponent>
                            <div className="graphView__container">
                                <Graph
                                    graph={graph}
                                    bounds={graphBounds}
                                    zoom={zoom || 1}
                                />
                            </div>
                        </TransformComponent>
                        <ToolButtons
                            zoomIn={zoomIn}
                            zoomOut={zoomOut}
                            resetTransform={resetTransform}
                        />
                    </>
                )}
            </TransformWrapper>
    );

TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function.
animation
src/store/animations/index.ts:35
    32 |     this.animation = null;
    33 |   } else {
    34 |     callback(step);
  > 35 |     requestAnimationFrame(this.animation);
    36 | ^  }
    37 | };
    38 | 

[frxzn]

I needed to toggle between zoomIn/reset mode on doubleClick depending on the zoom state. I was getting the same error, so what I did is to wait for the animation to finish (which defaults to 200ms) before setting the state, using setTimeout

const [zoom, setZoom] = useState(false);

const handleZoom = (e) => {
    if (e.scale > 1 && !zoom) {
      setTimeout(() => {
        setZoom(true);
      }, 200);
    } else if (e.scale === 1 && zoom) {
      setZoom(false);
    }
  };

<TransformWrapper
    onZoomChange={handleZoom}
    doubleClick={{ mode: zoom ? 'reset' : 'zoomIn' }}
>
   ...

[pasierb]

facing same issue =( any quick workarounds?

@edwinlimlx a quick workaround that worked for me was to use function child (or whatever it’s called in react world)

<TransformWrapper
        defaultScale={1}
        options={{
          minScale: 0,
          centerContent: true,
          limitToBounds: false
        }}
      >
        {({ resetTransform, zoomIn, zoomOut, scale }) => (
           ...