I'm trying to display the state of child component in parent component, but somehow the text "abcde" still not show, here is the sample code

import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';

class ChidComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  render() {
    return (
      <SafeAreaView>
        <TouchableOpacity
          onPress={() => {
            this.setState({text: 'abcde'});
            this.props.getText(this.state.text);
          }}>
          <Text>Get Text</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const style = StyleSheet.create({
  text: {
    fontWeight: 'bold',
    fontSize: 40,
  },
});
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  getTextFromChild(value) {
    this.setState({text: value});
  }
  render() {
    return (
      <SafeAreaView>
        <Text>{this.state.text}</Text>
        <ChidComponent
          getText={this.getTextFromChild.bind(this)}
          press={() => this.setState({show: !this.state.show})}
          textStyle={style.text}
        />
      </SafeAreaView>
    );
  }
}
export default ParentComponent;

But somehow the screen still empty, the 'abcde' still until i click twice, come from functional component so i don't know what going on, please help, thank you a lots