Передать входное значение функции родительского компонента

Я пытаюсь разработать приложение, основанное на реакции. У меня большой опыт работы с Java и PHP, но что-то меня смущает в React-Native. По сути, я пытаюсь получить рабочую СТРАНИЦУ входа (только для практических упражнений), но я борюсь, когда пытаюсь передать значение из значения дочернего компонента (например, ввод пароля) в функцию родительского компонента (LoginForm). Вот конкретный код: [Ввод пароля]

import * as React from 'react';
import { View } from 'react-native';
import { HelperText, TextInput } from 'react-native-paper';

class PasswordInput extends React.Component {
    constructor(props){
        super(props);
        this.state  = {
            password:''
        };
    }
    getPassword() {
        return this.state.password;
    }

    login(){
        alert(this.state.password)
    }

    OnChangesValue(e){
        console.info(e.nativeEvent.text);
        this.setState({
            userName :e.nativeEvent.text,
        })
    }

    changePassword(e){
        console.info(e.nativeEvent.text);
        this.setState({
            password :e.nativeEvent.text,
        })
    }

    hasErrors(text){
        let result=true;
        if (text.length>10 || text.length==0){
            result=false;
        }
        return result;
    };

    render() {
        return (
            <View>
                <TextInput
                    ref = "pass"
                    name = "password"
                    onChange = {this.changePassword.bind(this)}
                    secureTextEntry = {true}
                    label = "Password"
                    left = {<TextInput.Icon name = "lock" onPress = {() => {
                    }}/>}
                />
                <HelperText type = "error" visible = {this.hasErrors(this.state.password)}>
                    Password too short!
                </HelperText>
            </View>
        );
    }
}

export default PasswordInput;

а вот компонент LoginForm:

import * as React from 'react';
import { Component, createRef } from "react";
import {View, StyleSheet} from 'react-native';
import {Button, Card, Title} from 'react-native-paper';
import EmailInput from './login_components/email_input';
import PasswordInput from './login_components/password_input';
import {useRef} from 'react/cjs/react.production.min';

class LoginForm extends React.Component {

  passwordInput = createRef();

  submitForm(){
      alert(this.passwordInput['password'].value);
  }

  render() {
      return (
          <Card style = {styles.detailRowContainer}>
              <Card.Title
                  title = "Signup!"
                  subtitle = "Inserisci i tuoi dati per eseguire il login"
              />
              <EmailInput/>
              <PasswordInput ref = {this.passwordInput}/>
              <Card.Actions>
                  <Button mode = "contained" type = "submit" style = {styles.loginButtonSection} onPress = {() => this.submitForm()}>
                      LOGIN
                  </Button>
              </Card.Actions>
          </Card>
      );
  }
}

const styles = StyleSheet.create({
    loginButtonSection: {
        width: '100%',
        height: '30%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    detailRowContainer: {
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
});
export default LoginForm;

Моя цель (на данный момент) — понять, как получить значение PasswordInput в моем компоненте LoginForm, чтобы напечатать пароль в предупреждении (функция submitForm()).