Access MapRef outside Map Component

[petritnuredini]

So, I am building an app with NextJS. My main Goal is when user clicks on the list item in the right side a function pan the map to the marker of that company.
I have this screen:

They are in different Components (Files), but I am using a react hook that has this function

  const onMarkerClick = (
    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
    { markerId, lat, lng }: MarkerDataProps
  ) => {
    console.log("inside here", e, markerId, lat, lng, mapRef);

    if (activeTooltipId === markerId) {
      setActiveTooltipId(null); // Hide tooltip
    } else {
      setActiveTooltipId(markerId); // Show new tooltip
      mapRef.current?.panTo({ lat, lng });
    }
  };

in 1st case this is called from Marker component

const Marker: React.FC<MarkerComponentProps> = ({
  markerId,
  lat,
  lng,
  company,
  onClick,
  isActive,
  setActiveTooltipId,
}) => {
  const mapContainerRef = useRef<HTMLDivElement>(null);

  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    // Call the onClick prop with the necessary details
    onClick(e, { markerId: markerId, lat, lng });
  };

  // Use the hook to handle outside clicks
  useOutsideClick(mapContainerRef, () => {
    setActiveTooltipId(null);
  });

  return (
    <div className={style.marker_container} onClick={handleClick}>
      {isActive && (
        <div className={style.marker_tooltip} ref={mapContainerRef}>
          <MarkerTooltip
            company={company}
            setActiveTooltipId={setActiveTooltipId}
          />
        </div>
      )}
      <MarkerIcon />
    </div>
  );
};

same way I am using this component from ExplorerListItems, but, when I click the marker I get this:

When I click the Explorer List Item I get this:

Can't access the mapRef data.

I tried to save the mapRef with Redux state, didn't work.
Tried to access the mapRef from the hook, didn't work.
Haven't tried to use React Context yet.

Any idea how to access the mapRef and Pan Feature from different component?

Thank you in advance. 🙏🏻

****** Edited on 14 May 2024 ******
I managed to handle this by adding useContext on the project and saving the ref as global state.
Leaving it here just in case anyone needs it in the future. ✌🏻