Get values from useEffect hook and display in React's functional components

const TestComponent = () => {
 const [coordinates, setCoordinates] = 
useState({latitude:"", longitude:""});
const getCurrentPosition = async () => {
  const {
    coords: { latitude, longitude },
  } = await Geolocation.getCurrentPosition();
  setCoordinates({latitude, longitude})
};
  useEffect(() => {
    getCurrentPosition();
  });
  return (
    <IonPage>
      <IonContent>
        <div>Coordinates {coordinates.latitude}</div>
      </IonContent>
    </IonPage>
  );
};

Those values should live on the state somewhere. So for example:

const TestComponent = () => {
  const [coord, setCoords] = useState(null);
  useEffect(() => {
    getCurrentPosition().then((res) => {
      setCoords(res);
    }
  });
  // Now you have access too coords here
  if (!coords) return <div>Loading..<div> // handle waiting for the request
  return (
    <IonPage>
      <IonContent>
        <div>Coordinates { coords.latitude } { coords.longitude } </div>
      </IonContent>
    </IonPage>
  );
};