How to pass parent state as a prop to a child component and modify the state using child?

• I have a parent component which contains 4 buttons which I used to set a payment state. I want to pass the payment state to a a text field child component and also make it possible to use the text field to edit the state.
• I have tried to use something like this how to update parent state in child component and pass to parent state back? which works but I am using formik with yup validation in parent component and it does not seem to detect the change of value from the text field child component.

• Parent Component:

import React from "react";
import Child from 'path';

const animals = {
    {
        key:'1',
        label:'Elephant',
        isDefault:false
    },
     {
        key:'2',
        label:'Lion',
        isDefault:false
    },
     {
        key:'3',
        label:'Bear',
        isDefault:false
    },
}

const Parent = () =>{
    const defaultAnimalBtn = animals.some(choice => choice.isDefault === true);
    const [ animalState, setAnimalState ] = useState({value: defaultAnimalBtn.label});

    const handleAnimal = (index) => {

        const selectedAnimal = animalState[index];
        setAnimalState({value: selectedAnimal.label});
        
    };

    const handleAnimalChange = (event)=>{
        event.preventDefault();
        setAnimalState({value: event.target.value});
    };

    return(
        <>
            {
                animals.map(({ key, label }, index)=>(
                    <Button
                        key={key}
                        variant={`${label === animalState.value ? 'contained':'outlined'}`}
                        onClick={() => handlePayment(index)}
                    >
                        {label}
                    </Button>
                ))
            }
            <Child
                id="animal"
                name="animal"
                label="Animal"
                amount={animalState.value}
                onChange={handleAnimalChange}
            />
        </>
    );
}

• Child Component:

import React from "react";
import { Field, useField } from 'formik';

const Child = ({ id, label, ...props })=>{

    const [ field, meta ] = useField(props);

    return(
        
        <Field component={FormControl} fullWidth sx={{ mt: 3}} variant="standard">
            <InputLabel htmlFor={id}>{label}</InputLabel>
            <Input
                id={id}
                name={props.name}
                onChange={props.onChange}
                value={props.amount}
                { ...props }
                startAdornment={<InputAdornment position="start">$</InputAdornment>}
                label={label}
            />
            {_renderHelperText()}
        </Field >
    );
}
export default Child;

Note: I am using React MUI as my component library. I am also rendering the Parent component inside a custom MultiStepForm using Formik and yup for form validation.
I followed this tutorial(Video:Formik Multi-Step Form with Material UI) to create the MultiStepForm.