FPS is not calculating right in React

FPS calculation is not giving expected number in my react application.

My application looks like this

<Myapp> 
  <App1> 
   <FPSComponent /> 
  </App1>
  <App2> 
  <App3> 
</Myapp>

I have complex heavy 3D rendering components App2 and App3. App2 and App3 are rendering laggy but FPSComponent is rendering 120 fps. I am in MacBook.

FPSComponent use this react hook and render fps.

export function useFpsInfo(): any {
  const graphWidth = 70;
  const [state, dispatch] = useReducer(
    (state) => {
      const currentTime = Date.now();
      if (currentTime > state.prevTime + 1000) {
        const nextFPS = [
          ...new Array(Math.floor((currentTime - state.prevTime - 1000) / 1000)).fill(0),
          Math.max(1, Math.round((state.frames * 1000) / (currentTime - state.prevTime))),
        ];
        return {
          max: Math.max(state.max, ...nextFPS),
          len: Math.min(state.len + nextFPS.length, graphWidth),
          fps: [...state.fps, ...nextFPS].slice(-graphWidth),
          frames: 1,
          prevTime: currentTime,
        };
      } else {
        return { ...state, frames: state.frames + 1 };
      }
    },
    {
      len: 0,
      max: 0,
      frames: 0,
      prevTime: Date.now(),
      fps: [],
    },
  );
  const requestRef = useRef<number>(0);
  const tick = () => {
    dispatch();
    requestRef.current = requestAnimationFrame(tick);
  };

  useEffect(() => {
    requestRef.current = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(requestRef.current);
    };
  }, []);

  return state.fps[state.len - 1];
}

Can anyone help me to understand the reason behind it and if possible also resources so that I can learn more about.