配列に積んでいくhooks

import { useEffect, useState } from "react"

type MousePosition = { x: number; y: number; z: number }

type ReturnType = {
  viewportData: MousePosition[]
  setMousePosition: (e: any) => void
}

export function useMousePosition(isRecording: boolean): ReturnType {
  const [viewportData, setViewportData] = useState<ReturnType["viewportData"]>([
    { x: 0, y: 0, z: 0 }
  ])
  const [mousePosition, setMousePosition] = useState(null)

  useEffect(() => {
    if (isRecording && mousePosition) {
      setViewportData(prevData => [...prevData, mousePosition])
    }
  }, [isRecording, mousePosition])

  return {
    viewportData,
    setMousePosition
  }
}