Not optimized react hook to check collision between two elements

useCollision.js

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

export default function useCollision(ref1, ref2) {
  const [overlap, setOverlap] = useState(null)

  const scrollHandler = useCallback(() => {
    var rect1 =
      ref1.current instanceof Element
        ? ref1.current.getBoundingClientRect()
        : false
    var rect2 =
      ref2.current instanceof Element
        ? ref2.current.getBoundingClientRect()
        : false

    if (!rect1 || !rect2) {
      return
    }

    const olp = !(
      rect1.right < rect2.left ||
      rect1.left > rect2.right ||
      rect1.bottom < rect2.top ||
      rect1.top > rect2.bottom
    )

    if (olp !== overlap) {
      setOverlap(olp)
    }
  }, [ref1, ref2, overlap])

  useEffect(() => {
    scrollHandler();
    window.addEventListener("scroll", scrollHandler, true);
    return () => {
      window.removeEventListener("scroll", scrollHandler);
    }
  }, [scrollHandler])

  return overlap
}