Why does my pressable component display my off image on first tap and then works as expected?

Question

I aim to present a button that shows an on state image on press and when left immediately shows an off state image. On first tap the button displays the off state image and on all following taps it shows the on state image on tap as expected. Why does it show the off state image on first tap?

Images:

  const button_f_on = require('./app_ressources/button_on.png');
  const button_f_off = require('./app_ressources/button_off.png');

Tab with Pressable component:

 const testTab = ({ navigation, route }) => {
    return (
      <View style={styles.container_random}>
        <Pressable
        style={styles.button_f}
        onPress={play}>
        {({ pressed }) => (
          <Image  style={styles.button_f_image} resizeMode='contain' source={pressed ? button_f_on : button_f_off}></Image>
        )}
      </Pressable>

    </View>
    );
  };

Styles:

      container_random: {
         backgroundColor:"#fcc938",
         alignContent:'center',
         justifyContent:'center',
         flex:6,
         flexDirection:'column'
      },
      button_f: {
        alignItems:'center',
        justifyContent:'center',
        alignSelf:'center',
        resizeMode:'contain',
        borderRadius:180,
        padding:0,
        flex:3
      },
      button_f_image: {
        width: '90%',
        height: undefined,
        aspectRatio: 1
      }

Edit: I incorporated useState, which was nice to learn! But in the end it was a render problem caused by the dimensions of the images used. I scaled them 50% down (from 3500px * 3500px to 1750px * 1750px) and the problem disappeared.

 const testTab = ({ navigation, route }) => {
    const [pressed , setPressed] = useState(false);
    let d = pressed ? [styles.button_f_image, styles.hidden] : styles.button_f_image
    let d2 = pressed ?  styles.button_f_image : [styles.button_f_image, styles.hidden]
    return (
      <View style={styles.container_random}>

        <Pressable
        style={styles.button_f}
        onPressIn={() => { play(); setPressed(!pressed);}}
        onPressOut={() => { setPressed(!pressed);}}
        >
        <Image  style={[d]} resizeMode='contain' source={button_f_off}></Image>
        <Image  style={[d2]} resizeMode='contain' source={button_f_on}></Image>
      </Pressable>
      
    </View>
    );
  };

Answer 1

const [buttonPressed , setButtonPressed] = useState(false)


<Image source={buttonPressed ? button_f_on : button_f_off} 
onPress={()=> setButtonPressed(!buttonPressed)}/>