Polyfill for toggling animation-play-state for iOS 11.0.3(maybe other versions or platforms also have this issue) when using rotate transform

rotate-animation-play-state-polyfill.tsx

import logo from "./logo.svg";
import "./App.css";
import { useEffect } from "react";

let prevTimestamp: null | number = null;
let duration = 0;
let animationID = -1;

function rotateLogo(timestamp: number) {
  if (prevTimestamp === null) {
    prevTimestamp = timestamp;
  } else {
    duration += timestamp - prevTimestamp;
    prevTimestamp = timestamp;
  }
  // 360deg / 20_000ms = 0.018 deg/ms
  const modDuraion = duration % 20_000;
  const deg = modDuraion * 0.018;
  const imgElem = document.getElementById("my-img")!;
  imgElem.style.transform = `rotate(${deg}deg)`;
  animationID = requestAnimationFrame(rotateLogo);
}

function App() {
  useEffect(() => {
    animationID = requestAnimationFrame(rotateLogo);
    return () => {
      cancelAnimationFrame(animationID);
    };
  });

  function handlePlayPause() {
    if (animationID !== -1) {
      cancelAnimationFrame(animationID);
      prevTimestamp = null;
      animationID = -1;
    } else {
      animationID = requestAnimationFrame(rotateLogo);
    }
  }

  return (
    <div className="App">
      <header className="App-header" onClick={handlePlayPause}>
        <img id="my-img" src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;