React.js Pass input value from child to Parent

import React, {useState} from "react";

const AddHamster  = () => {
    const [name, setName] = useState( '')
    const [age, setAge] = useState('')
  
    async function postHamster(){
        const newHamster = {
            name: name,
            age: Number(age),
        }
     
        const response = await fetch('/hamsters ', {method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(newHamster)
        })
        const data = await response.json()
        console.log(data, "this is data id"); 
        console.log(newHamster) 
    }
 
    return   {
        name,
        age, 
        render: (
        <div className="add-hamster">
        <form onSubmit={e => { e.preventDefault(); }}>
        <label>Name</label>

        <input value={name} 
          type="text"
          onChange={(e) =>setName(e.target.value)}
          id="addhamster" /> 
         <label>Age</label>

        <input value={age} 
         type="text"
         onChange={(e) =>setAge(e.target.value)} 
         id="addhamster" />
     </form> 

     <button onClick={e => postHamster()}>Add Hamster</button>
     </div>
        
    )}
          
 }

export default AddHamster;

import React, {useState, useEffect} from "react";
import './HamsterCard.css';
import Hamster from  './Hamster';
import AddHamster from './AddHamster.jsx';

const HamsterCard = () => {
    const {render, name, age} = AddHamster();
    const [hamsters, setHamsters] = useState([])
    
    
    useEffect(() => {
        async function get(){
        const response = await fetch('/hamsters', {method: 'GET',})
        //fetchar och tar emot data i reponsens
        const data = await response.json() //Data
        setHamsters(data)
        console.log(data)
     
        } 
       get()    
    }, []  );


    return (
      //pass the id inside of the delete function to which id to delete
        <div className="container"> 
            <div className="hamster-card">
            {hamsters.map((hamster) => (
            <Hamster hamster={hamster} 
            key={hamster.id} {...{name, age}}/>  
            ))
            }
            {render}
            </div>
        </div>    
     
    )
}

export default HamsterCard;

import React, {useState} from "react";
const Hamster = (props) => {

   const [hamsterDeleted, setHamsterDeleted] = useState(false)
    async function deleteHamster(id) {
        const response = await fetch(`/hamsters/${id}`, { method: "DELETE" });
        setHamsterDeleted(true)
    
        }
 
         return (
                hamsterDeleted ? null : (  
                    <div>
                <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button>
                <h2>{props.hamster.name}</h2> 
                <p>Ålder:{props.hamster.age}</p> 
                <p>Favorit mat:{props.hamster.favFood}</p> 
                <p>Matcher:{props.hamster.games}</p> 
                <img src={'./img/' + props.hamster.imgName} alt="hamster"/> )
                </div>
              ))
        }
    
       
    

export default Hamster;