Реагировать установить значение переменной из обратного вызова из дочернего компонента

Я изучаю React, и мне нужна помощь в обнаружении проблемы с этим кодом и понимании того, что я делаю неправильно. Родительский компонент - MyMap, и ему нужны значения для Lat из его дочернего компонента, который является панелью поиска. Имя функции обратного вызова - setLatInfo, и она установит значение для переменной lat, определенной в useState.

Ошибка, которую я вижу, - это присвоения переменной setLatInfo изнутри React Hook useEffect будут потеряны после каждого рендеринга. Чтобы сохранить значение с течением времени, сохраните его в хуке useRef и сохраните изменяемое значение в свойстве .current. В противном случае вы можете переместить эту переменную прямо в useEffect.

на функции setLatInfo = (latInfo: number)

Как я могу назначить функцию обратного вызова в блоке useEffect?

import SearchBar from "../components/SearchBar";

const MyMap: FunctionComponent = () => {
    const [lat, setLat] = useState();
  let setLatInfo: (latInfo: number) => void;

  useEffect(() => {
    const loadData = () => {
      
      // map?.map
     // (map as any)?.map.addLayer(h3Layer);
    };
  
    setLatInfo = (latInfo: number) => {   // this entire function is showing error 
      setLat(latInfo);
      console.log(lat);
      console.log(latInfo);
    };

  }, []);

  return (
    <div>
      <SearchBar
        parentCallbackLat={setLatInfo}
      />
    </div>
  );
};