test.tsx

const { awake, request, release } = useWakeLock()
...
...

return (
...

  onClick={() => {
    // can't mix with other functions to make sure
    // the video is played under a user interaction?
    awake ? release() : request()
  }}

...
)

useWakeLock.ts

import NoSleep from "nosleep.js"
import React from "react"

const useWakeLock = () => {
  const noSleep = React.useMemo(() => new NoSleep(), [])
  const [awake, set] = React.useState(noSleep.isEnabled)

  const request = React.useCallback(() => {
    noSleep.enable().then(() => set(noSleep.isEnabled))
  }, [])

  const release = React.useCallback(() => {
    noSleep.disable()
    set(noSleep.isEnabled)
  }, [])

  return {
    awake,
    request,
    release,
  }
}

export { useWakeLock }