Menggunakan CrollPrecent

import { useCallback, useEffect, useState } from 'react'

export default function useScrollPrecent() {
  const [scroll, setScroll] = useState(0)

  const handleScroll = useCallback(() => {
    setScroll(
      window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
    )
  }, [])

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, true)

    return () => window.removeEventListener('scroll', handleScroll)
  }, [handleScroll])

  return scroll
}

T-DaMER