pass value from one js file to another js file in react native :react native

I have this parent baby_login file, it has a google sign up button which is a component with file name Sign.

When I click on the button I want userInfo to pass from sign.js to Signupfor.js – how can I achieve this?

export default function Baby_login() {
  return (
    <View style={styles.prheight}>
      <Image
        source={require('../assets/images/mother.png')}
        style={{
          width: 300,
          marginLeft: 20,
          marginTop: 0,
          justifyContent: 'center',

          height: 300,
          textAlign: 'center',
        }}
      />
      <View style={styles.buttonw}>
        <Sign />
      </View>
    </View>
  );
}

sign.js

export default function Sign(navigation) {
  
  async function onGoogleButtonPress() {
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    console.log(userInfo);
    setuserInfo(userInfo);
   
  }
  return (
    <View style={styles.prheight}>
      <View style={styles.buttonw}>
        <GoogleSigninButton
          style={{width: 192, height: 48}}
          size={GoogleSigninButton.Size.Wide}
          color={GoogleSigninButton.Color.Light}
          onPress={onGoogleButtonPress}
          // disabled={this.state.isSigninInProgress}
        />
      </View>
    </View>
  );
}

Signupfor.js

import React from 'react';

export default function Signupfor(userInfo) {
  return <View style={styles.prheight}></View>;
}

app.js

here i have updated the app.js file so that u can see naviagtion details

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {Provider as PaperProvider} from 'react-native-paper';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {StyleSheet, Text, View} from 'react-native';
import Baby from './components/baby_login';
import {Avatar, Card, Title, Paragraph} from 'react-native-paper';
import {Image} from 'react-native';
import Signupfor from './components/signupfor';
import Pregnant from './components/pregent_login';

import {Button} from 'react-native';

function Dashbord({navigation}) {
  const LeftContent = props => <Avatar.Icon {...props} icon="folder" />;
  return (
    <View style={styles.main}>
      <Title
        style={{
          textAlign: 'center',
          marginBottom: 30,
          fontSize: 28,
          fontFamily: 'Poppins-ExtraBold',
        }}>
        Tell us about you
      </Title>
      <Card
        style={styles.main2}
        onPress={() => navigation.navigate('Pregnant')}>
        <Image
          source={require('./assets/images/pregnant.png')}
          style={{
            width: 80,
            marginLeft: 90,
            marginTop: 0,
            justifyContent: 'center',

            height: 80,
            textAlign: 'center',
          }}
        />
        {/* <Image source={require('./assets/images/pregnant.png')} /> */}
        <Text
          style={{
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Poppins-ExtraBold',
          }}>
          I am pregnant
        </Text>
      </Card>
      <Card style={styles.main2} onPress={() => navigation.navigate('Baby')}>
        <Image
          source={require('./assets/images/mother.png')}
          style={{
            width: 80,
            marginLeft: 90,
            marginTop: 0,
            justifyContent: 'center',

            height: 80,
            textAlign: 'center',
          }}
        />
        <Text
          style={{
            textAlign: 'center',
            fontSize: 20,
            fontFamily: 'Poppins-ExtraBold',
          }}>
          i am a mother
        </Text>
      </Card>
    </View>
  );
}

function HomeScreen({navigation}) {
  return (
    <View style={styles.prheight}>
      <View>
        <Text style={styles.r}>home</Text>
      </View>
      <View style={styles.buttonw}>
        <Button
          color="#7743DB"
          title="Lets Go"
          onPress={() => navigation.navigate('Dashbord')}
        />
      </View>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            options={{headerShown: false}}
            name="Home"
            component={HomeScreen}
          />
          <Stack.Screen name="Dashbord" component={Dashbord} />
          <Stack.Screen name="Baby" component={Baby} />
          <Stack.Screen name="Pregnant" component={Pregnant} />
          <Stack.Screen name="Signupfor" component={Signupfor} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
}