Use this hook to watch element intersection
export const useIntersectionObserver = ({ root, target, onIntersect, threshold = 0.4, rootMargin = '0px', enabled = null }) => {
useEffect(() => {
if (!enabled) {
return;
}
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => entry.isIntersecting && onIntersect()), {
root: root?.current,
rootMargin,