How to avoid TouchableWithoutFeedback decrease opacity when pressed

Question

Basically, I have a React Native code with TouchableWithoutFeedback which blinks when I press. I have a TouchableWithoutFeedback wrapping an Image component. When I pressIn changes the state changing the Image's source. When I pressOut changes the state restoring the original Image's source. What I'm doing wrong here?

My code

    import React, { useState } from 'react';
    import {
      StyleSheet,
      Image,
      TouchableWithoutFeedback,
    } from 'react-native';
    import KeyNotes from '../assets/img/keys/';
    import { Container } from './styles';

    export default function Key({ keyName }) {
      const [bg, setBg] = useState(keyName);

      function handlePress() {
        const pressedKeyName = 'KeyNotes["pressed"]';
        setBg(pressedKeyName);
      }

      return (
        <Container>
          <TouchableWithoutFeedback
            style={styles.btn}
            onPressIn={() => handlePress()}
            onPressOut={() => setBg(keyName)}>
            <Image style={styles.image} source={KeyNotes[bg]} />
          </TouchableWithoutFeedback>
        </Container>
      );
    }

    const styles = StyleSheet.create({
      image: {
        flex: 1,
        width: '100%',
        height: null,
        resizeMode: 'contain',
      },
      btn: {
        flex: 1,
        width: '100%',
      },
    });
    enter code here

How to avoid the blinking effect?