"onFinish" does not work with vite 3.0 dev mode

[ZhUyU1997]

Bug Report

Describe the Bug

The latest vite3.0 & React will trigger unmount forcibly at the first render. This behavior causes hasUnmountedRef.current === true. The related code is as below.

        if (!hasUnmountedRef.current) {
          // @ts-expect-error
          onFinishRef.current({
            playState: animation.playState,
            animate: animate,
            animation: animation
          });
        }

How to Reproduce

1. Launch vite example project
2. Copy the below code

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import useWebAnimations from "@wellyshen/use-web-animations";

function App() {
  const [count, setCount] = useState(0);
  const { animate, ref, playState, getAnimation } = useWebAnimations({
    onFinish: ({ animation }) => {
      console.warn("onFinish");
    },
  });

  return (
    <div className="App">
      <div className="card">
        <button
          onClick={() => {
            animate({
              keyframes: [
                { transform: `scale(1.08)`, offset: 0 },
                { transform: `scale(1)`, offset: 150 / 500.0 },
                { transform: `scale(1.08)`, offset: 1 },
              ],
              animationOptions: {
                duration: 500,
                easing: "cubic-bezier(0.3,0,0.15,1)",
              },
            });
            setCount((count) => count + 1);
          }}
          ref={ref}
        >
          count is {count}, {playState}
        </button>
      </div>
    </div>
  );
}

export default App;

Expected Behavior

"onFinish" should be triggered

Your Environment

• Browser: [e.g. Chrome]
• Version: [e.g. v105]