Opening an alert function when permission is not 'granted'

In my code, you can see it starts by asking for the users location permission. When granted, it logs and displays the users latitude and longitude.

I am trying to have an alert pop up when the user declines this permission. I thought it would be as simple as what I have implemented in the code below but obviously something is wrong. I am calling my permissionAlert function in my if statement when status != granted.

I have included the code below as well as a snack example here.

Thank you for any insight at all.

export default function App() {
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  

  const permissionAlert = () => {
     Alert.alert(
      'You did not allow location permissions',
      [
        {text: 'Yes', onPress: () => console.log('Yes button clicked')},
        {text: 'No', onPress: () => console.log('No button clicked'), style: 'cancel'},
      ],
      { 
        cancelable: true 
      }
    );
  }

  useEffect(() => {
    (async () => {
      
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        permissionAlert();
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLatitude(location.coords.latitude)
      setLongitude(location.coords.longitude);
    })();
  }, []);


  console.warn("latitude: ", latitude);
  console.warn("longitude: ", longitude);
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{latitude}</Text>
      <Text style={styles.paragraph}>{longitude}</Text>
    </View>
  );
}