I'm facing a weird problem. In my react native app I have conditions that render the View and ScrollView. The problem is the false statement shows first before the true statement, so I have example below let say the PinCodeVisible.showPinLock is true so the Pincode should shown not the false statement which is the text. My problem is it shows first the false statement which is the text and then after it loads the true statement which is pincode , I just want to disregard the text under the false statement since it is false,

why It shown even it is false statement? Did I missed something?

const [PinCodeVisible, setPin] = useState({ PINCodeStatus: "choose", showPinLock: false });

React.useEffect(() => {
setPin({ showPinLock: true});   //let say the pincode is true
 }, [])


return (
    <View style={styles.container} >
        {PinCodeVisible.showPinLock === true ? (

            <PINCode
                // modalVisible={modalVisible}
                status={PinCodeVisible.PINCodeStatus}
                touchIDDisabled={true}
                finishProcess={() => _finishProcess()}
                timeLocked={5000}
            />
        ) :
            <ScrollView style={styles.container}> //this scrollview shown first event the statement is true
                <Text>This text will show before the true statement above</Text>  // it should not shown because the statement is true
            </ScrollView>}
    </View>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }