Как избежать TouchableWithoutFeedback уменьшить непрозрачность при нажатии

Question

По сути, у меня есть React Native код с TouchableWithoutFeedback, который мигает при нажатии.У меня есть TouchableWithoutFeedback упаковка компонента Image.Когда я pressIn меняет состояние, изменяя источник изображения.Когда я pressOut меняет состояние, восстанавливая исходное изображение источника.Что я тут не так делаю?

Мой код

    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

Как избежать эффекта мерцания?