Uncaught TypeError: Cannot destructure property 'x' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined

I am trying to determine if my mouse pointer is near sidebar or footer area or header area and based on that i try to determine x and y values to fade in and fade out all 3 components together.
But i get this error on console
Uncaught TypeError: Cannot destructure property ‘x’ of ‘(intermediate value)(intermediate value)(intermediate value)’ as it is undefined.
At onMouseMove

where am i going wrong.

    const onMouseMove = (event) => {
      if (event) {
        const { clientX, clientY } = event
        let refComp
        if (e.target === sideRef?.current)
          refComp = sideRef?.current
        else if (e.target === footerRef?.current)
          refComp = footerRef?.current
        else if (e.target === headerRef?.current)
          refComp = headerRef?.current
        const { x, y, width, height } =
          refComp?.getBoundingClientRect()
        if (
          clientX > x  &&
          clientX < x + width  &&
          clientY > y  &&
          clientY < y + height 
        ) {
          setFadeOut(false)
        } else {
          setFadeOut(true)
        }
      }
    }

>Solution :

Below code will handle destructring when object is undefined / null, however all destructured variables would be set undefined.

const { x, y, width, height } = refComp?.getBoundingClientRect() || {};

Below code assigns a default value to destructured variables.

const { x = 0, y = 0, width = 0, height = 0 } = refComp?.getBoundingClientRect() || {};