Setting react-native-modal visibility in use effect when routing to page not working

Hi I am trying to set the visibility of my react native modal in my useEffect function when I first route to a page. For some reason the state will set to true but the modal wont render. Also I tried building this in the an expo snack and it worked so i’m truly at a loss for why it wont work in my project.

Here is the full page with all the imports:

import Modal from 'react-native-modal'
import React, { useEffect, useState, useContext } from "react";
import { vh, vw } from 'react-native-expo-viewport-units';
import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
export default Lol = () => {
const [guidanceVisible, setGuidanceVisible] = useState(false);

useEffect(() => {
    setGuidanceVisible(true)
    console.log('fired')
}, [])

return (
  <View style={{ width: vw(100), height: vh(100), justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello</Text>
    {console.log(guidanceVisible)}
    <Modal
      isVisible={guidanceVisible}
      onBackdropPress={() => setGuidanceVisible(false)}
      backdropOpacity={.75}
    >
      <View style={{
        width: '100%',
        height: '100%',
        backgroundColor: 'green',
        zIndex: 10,
      }}/>
    </Modal>
  </View>
);
}

The state is getting set to true in the console.log and the fired is getting called in the useEffect.

Here is my version in the package.json I just removed and added it again today

"react-native-modal": "^13.0.1",

Also I know that setTimeout is a workaround but it causes some bugs in my actual use case and not this simplified version. Any help would be truly appreciated and thanks ahead of time.