I am using react-bubble-ui and want to make this scroll to where the mouse pointer is.

Created the hook to trace where the mouse pointer is

import React from "react";

const useMousePosition = () => {
  const [mousePosition, setMousePosition] = React.useState({
    x: null,
    y: null,
  });

  React.useEffect(() => {
    const updateMousePosition = (ev: any) => {
      setMousePosition({ x: ev.clientX, y: ev.clientY });
    };

    window.addEventListener("mousemove", updateMousePosition);

    return () => {
      window.removeEventListener("mousemove", updateMousePosition);
    };
  }, []);

  return mousePosition;
};

export default useMousePosition;

And I place this to here but it only tracks the point as a website not the inside the CompanyBubbles.

export default function CompanyBubbles({ companies }) {
  const mousePosition = useMousePosition();


  useEffect(() => {
    console.log(mousePosition);
  }, [mousePosition]);


  const children = companies?.map((data: any, i: number) => {
    return <Child data={data} key={i} />;
  });

  return (
    <BubbleUI options={options} className="h-[300px] rounded-50">
      {children}
    </BubbleUI>
  );
}

How can I make the browser track the mouse pointer x, y inside the CompanyBubbles only and scroll to where the mouse pointer is?