Не работает модальное окно в React Native TypeScript

Я пытаюсь через useState передать значение из одного файла, где находится кнопка и функция, в другой файл в котором само модальное окно находится. Я явно что то делаю не так, вот код:

Первый файл с модальным окном

import React from "react";
import { Modal, StyleSheet, View, Text } from "react-native";
import { ButtonPay } from "../UI/ButtonPay";
export const HomeModul = (modalPay:any, setModalPay:any) =>{
    

    return(
        <View style={styles.container}>
            
            <Modal 
            animationType="slide" 
            transparent={true}
            visible={modalPay}
            onRequestClose={() => {
                setModalPay(!modalPay);
            }}>
                <View style={styles.modal}>
                    <Text style={styles.text}>sejfnekjfsnske</Text>
                </View>
            </Modal>
            <ButtonPay/>
        </View>
    );
};

Второй файл с кнопкой

import React, { useState } from "react";
import { StyleSheet, TouchableOpacity, Text } from "react-native";


export const ButtonPay = () =>{
    const [modalPay, setModalPay] = useState(false);
    return (
        <TouchableOpacity onPress={() => setModalPay(!modalPay)} style={styles.container}>
            <Text style={styles.text}>Оплатить</Text>
        </TouchableOpacity>

    );
};