A tool function use to hide cursor after specified time, show after move, and you can control this feature start and stop.

hideMouseAfter.ts

const useHideMouse = (time: number) => {
  let timeoutId = -1
  let lastElement
  let lastElementCur = ""
    
  const hideMouseAfter = (e: MouseEvent) => {
    clearTimeout(timeoutId)
    document.body.style.cursor = 'auto'
    if (lastElement) {
      lastElement.style.cursor = lastElementCur
    }
    lastElement = e.target
    if (lastElement) {
      lastElementCur = lastElement.style.cursor
    }
    
    timeoutId = setTimeout(() => {
      lastElementCur = lastElement.style.cursor
      if (lastElement)
        lastElement.style.cursor = 'none'
      document.body.style.cursor = 'none'
    }, time)
  }
  
  return {
    begin() {
        document.addEventListener('mousemove', hideMouseAfter)
    },
    end() {
        clearTimeout(timeoutId)
        if (lastElement)
          lastElement.style.cursor = lastElementCur
        document.body.style.cursor = 'auto'
        document.removeEventListener('mousemove', hideMouseAfter)
    }
  }
}

User guide

Copy this code to your code.
And remove parameter type in L1(No need to do this if using TypeScript):

- const useHideMouse = (time: number) => {
+ const useHideMouse = (time) => {

And L6(No need to do this if using TypeScript):

-   const hideMouseAfter = (e: MouseEvent) => {
+   const hideMouseAfter = (e) => {

Then use it:

const { begin, end } = useHideMouse(1000)
begin()

Now your cursor will hide after 1000ms when you stopped move your mouse, and will appear when you moving your mouse, you can stop this behaviour any time:

end()