How can I use Pressable inside Animated in React native?

I applied Animated.View to the Card component and ScrollView to the CardMain component. And pressable is applied to the child component, called ModeContainer. In ModeContainer, changemodefunc is executed when onPress is triggered.

When I run in emulator and press ModeContainer(Pressable), onPress runs fine, changemodefunc works fine. However, problem is if I connect it to a real device and run it, it will not run even if I press ModeContainer(Pressable). How do we solve this problem?

i'm using window and Emulator

this is my code

import {
    Animated,
    View,
    ScrollView, 
} from 'react-native';    
    
import LinearGradient from 'react-native-linear-gradient';


const Container = styled(LinearGradient)`
flex: 1;
justify-content: center;
align-items: center;
`;


const SecondContainer = styled.View`
flex: 9.1;
`;


const Card = styled(Animated.createAnimatedComponent(View))`
flex: 1;
`;


const CardWapper = styled(LinearGradient)`
flex: 1;
`;

const CardMain = styled(ScrollView)`
flex: 9;
`;


const ModeWrapper = styled.View`
flex:1;
`;

const ModeContainer = styled.Pressable`
`;


const IconCon = styled.Pressable`
width: 50px;
`;

<Container
>

    <SecondContainer
    >
        <Card
            style={{
                transform: [...POSITION.getTranslateTransform()],
            }}
        >
            <CardWapper>
                <CardMain>
                    <ModeWrapper>
                        (
                        <ModeContainer
                            onPress={() => changemodefunc('black')}>
                            <IconCon
                            >
                            </IconCon>
                        </ModeContainer>
                        )

                    </ModeWrapper>
                </CardMain>
            </CardWapper>

        </Card>
    </SecondContainer>

</Container>