Passing a function as prop in react native react navigation - react-native

Question

Hi I want to add a function to record the value of input and want to use it in all components and input is in another component and I want to pass a function from App.js to that component but it does not work please help me out \
Please note that the function should be in the App.js passed to Component.js through a Navigator
//App.JS
import React,{useState, useEffect} from "react";
import {
Text,
Link,
HStack,
Center,
Heading,
Switch,
useColorMode,
NativeBaseProvider,
extendTheme,
VStack,
Box,
} from "native-base";
import NativeBaseIcon from "./components/NativeBaseIcon";
import { Platform } from "react-native";
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import HomeScreen from "./Comp/HomeScreen";
import { NavigationContainer } from "#react-navigation/native";
import Location from "./Comp/Location";
export default function App() {
const [api, setapi] = useState(process.env.REACT_APP_API_KEY)
const api_1 = () => {
setapi(process.env.REACT_APP_API_KEY_2)
}
const api_2 = () => {
setapi(process.env.REACT_APP_API_KEY_3)
}
const [value, setvalue] = useState("London")
const handlechange = (e) => {
setvalue(e.target.value)
console.log('value :>> ', value);
}
const Tab = createMaterialBottomTabNavigator();
return (
<NativeBaseProvider>
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen initialParams={{value:value, change:handlechange}} name="Location" component={Location} />
</Tab.Navigator>
</NavigationContainer>
</NativeBaseProvider>
);
}
//Component.js
import { Center, Input, Text } from 'native-base'
import React, {useState} from 'react'
import { ImageBackground } from 'react-native'
import BG from "./Img/BG.png"
export default function Location({ navigation, route }) {
// const [value, setvalue] = useState("London")
// const handlechange = (e) => {
// setvalue(e.target.value)
// console.log('value :>> ', value);
// }
const { change, value } = route.params;
return (
<ImageBackground source={BG}>
<Center minH={"100vh"} w={"90vw"} alignSelf={"center"} alignContent={"center"}>
<Input color={"white"} size="xl" onChange={change} variant="rounded" placeholder="Enter Location" />
<Text color={"white"}></Text>
</Center>
</ImageBackground>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>