UseDebounce

Debouncing is a programming pattern or a technique
to restrict the calling of a time-consuming function frequently,
by delaying the execution of the function until a specified time
to avoid unnecessary CPU cycles,

import { useState } from 'react'
 
export const useDebounce = (timeout = 500) => {
  const [timer, setTimer] = useState(0)
 
  const debounce = (fn: () => void) => {
    if (timer) clearTimeout(timer)
    const newTimer: any = setTimeout(() => fn(), timeout)
    setTimer(newTimer)
  }
 
  return { debounce }
}

const TimeIntervalPicker = (value: any) => {
  const { debounce } = useDebounce()
 
  const scrollIntoView = (time = value) => {
    debounce(() => {
      document.getElementById(time?.format('hh:mm A'))?.scrollIntoView({
        behavior: 'auto',
        block: 'nearest',
        inline: 'nearest',
      })
    })
  }
}