Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

I'm trying to implement the location permission in react native (I'm using expo CLI)

this is the function that I already created :

function OfferScreen({ navigation}: {navigation:any}) {
  //STATE VARIABLES FOR FETCHING DATA
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const value = new Animated.Value(1);
  //FETCHING DATA
  React.useEffect(() => {
    fetch("https://fidness.net/WSExchange/getListActiveProspectus")
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((error) => {
        alert(
          "Erreur avec le chargement des offres, veuillez réssayer ultérieurement!"
        );
        setLoading(false);
      });


      //GEOLOCATION TEST
      //STATE FOR GEOLOCATION
  const [location, setLocation] = useState < any | null > (null);
  const [hasPermission, setHasPermission] = useState < any | null > (null);
    useEffect(() => {
      (async () => {
          const {status} = await Location.requestForegroundPermissionsAsync();
          setHasPermission(status === "granted");
          let location = await Location.getCurrentPositionAsync({});
      })();
  }, []);
}
export default OfferScreen;

and this is the target function in my tab bar

<Tab.Screen //TABSCREEN OFFER
                options={
                    {headerShown: false}
                }
                name={"Offres"}
                component={Offers}/>

and by the way when I remove the location permission code works fine.