从子组件（Tab Navigator）更新父组件的状态

我是React和React Native的新手，我正在尝试构建一个烹饪食谱应用程序。我正在尝试从DishIngredients.js更新DishTabNavigator.js中的菜品状态，以便可以将数据从DishTabNavigator.js发送到Firebase，但是我不知道如何更新状态。我试图提升状态，但我做不到。现在被困了一天。任何帮助，将不胜感激

DishTabNavigator.js

const Tab = createMaterialTopTabNavigator();

export default function MyTabs({ navigation }) {
  const [dish, setDish] = useState([{ ingredients: [] }]);
  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity style={styles.iconright}>
          <Text>Send dish to Firebase</Text>
          <FontAwesome name="save" size={24} color="black" />
        </TouchableOpacity>
      ),
    });
  });
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Ingredient"
        component={DishIngredients}
        ingredients={dish}
      />
    </Tab.Navigator>
  );
}

DishIngredients.js

class DishIngredients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ingredients: [],
      textInput: [],
    };
//Add TextInput
  addTextInput = (index) => {
    let textInput = this.state.textInput;
    textInput.push(
      <TextInput
        style={styles.textInput}
        onChangeText={(text) => this.addValues(text, index)}
      />
    );
    this.setState({ textInput });
  };

//Function to add values into the states
  addValues = (text, index) => {
    let dataArray = this.state.ingredients;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach((element) => {
        if (element.index === index) {
          element.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      this.setState({
        ingredients: dataArray,
      });
    } else {
      dataArray.push({ text: text, index: index });
      this.setState({
        ingredients: dataArray,
      });
    }
  };

  //function to console the output
  getValues = () => {
    console.log("Data", this.state.ingredients);
    this.props.ingredients = this.state.ingredients;
    console.log(this.props.ingredients);
  };

  render() {
    return (
      <View>
        <View style={styles.icon}>
          <View style={{ margin: 10 }}>
            <TouchableOpacity>
              <Ionicons
                name="add"
                size={24}
                color="black"
                onPress={() => this.addTextInput(this.state.textInput.length)}
              />
            </TouchableOpacity>
          </View>
          <View style={{ margin: 10 }}>
            <Button title="Remove" onPress={() => this.removeTextInput()} />
          </View>
        </View>
        {this.state.textInput.map((value) => {
          return value;
        })}
        <Button title="Get Values" onPress={() => this.getValues()} />
      </View>
    );
  }
}

export default DishIngredients;