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

Question

В принципе, у меня есть код React Native с TouchableWithoutFeedbackкоторый мигает, когда я нажимаю. у меня естьTouchableWithoutFeedbackупаковка компонента изображения. Когда я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

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