Реагировать на собственные функции вызова и изменять состояния из компонента

Итак, в настоящее время у меня есть функция, которая отображает компонент NewButton, в этом компоненте как мне вызвать функцию toggleModalVisibility, которая определена вне этого компонента? Эта функция изменит многие состояния и вызовет другие функции, а также изменит отрисовку.

import React, {  useState, useEffect} from 'react'
import {Button, View, Text, StyleSheet,TextInput,ScrollView, Modal} from 'react-native'
import { BottomSheet } from 'react-native-btr';
import NewButton from './NewButton'


export default function CardFolder({navigation, navigation: {setOptions}}){

    const [visible, setVisible] = useState(false);
    //many other states
 
    const toggleModalVisibility = () => {
        //changes states, calls other functions, change rendering, Toggle bottomSheet
    };

    return(
        < >
        <Modal> modal containing a text field, change states </Modal>
        <BottomSheet>contains other options, upload something to db</BottomSheet>
        <View style = {{flex:1}}>

        <NewButton style = {{bottom: 50}} />

        </View>
        </>  
    )      
}  

Компонент:

import {View, Button} from 'react-native'

export default class NewButton extends React.Component {
 
        return(
            <View style = {[styles.container,this.props.style]}>
                //how do I call the functon toggleModalVisibility here?
                <Button onPress = {toggleModalVisibility}/>
            </View>
        )
    }
}