How to pass multiple onChange form data from child to parent element in react

I am trying to print real-time user input from input tags by the user. I am even getting multiple user inputs from the child element to the parent element as a form of an object using useState. But whenever the user tries to fill the second input field, then the first input is re-render and it’s replaced by the primary state which is an empty string.
code:-
Child Element

import React, { useState } from "react";

const Child = (props) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  let userData = {
    name: "",
    age: ""
  };
  const nameChangeHandler = (e) => {
    setName(e.target.value);
    userData.name = e.target.value;
  };

  const ageChangeHandler = (e) => {
    setAge(e.target.value);
    userData.age = e.target.value;
  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
    props.getData(userData);
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={nameChangeHandler}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={ageChangeHandler}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

Parent Element

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  let userData = (data) => {
    setName(data.name);
    setAge(data.age);
  };
  return (
    <React.Fragment>
      <Child getData={userData} />
      <h1>Your name is:{name}</h1>
      <h1>Your age is:{age}</h1>
    </React.Fragment>
  );
}

export default App;

code sandbox Link- https://codesandbox.io/s/from-traversing-child-to-parent-to-another-child-ynwyqd?file=/src/App.js:0-441

How I can get both data being reflected by using onChange from child to parent element?

>Solution :

I suggest you accumulate the user data in one state.
Like this.

  const [user, setUser] = useState({
    name: "",
    age: null
  });

And put the state on the parent and pass as props, also just have one handleChange function to update both the name and age by the input id

Child.js

import React, { useState } from "react";

const Child = ({ user, setUser }) => {
  const handleChange = (e) => {
    setUser((prev) => ({
      ...prev,
      [e.target.id]: e.target.value
    }));
  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };

  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={user.name}
          onChange={handleChange}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={user.age}
          onChange={handleChange}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

App.js

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const [user, setUser] = useState({
    name: "",
    age: null
  });

  return (
    <React.Fragment>
      <Child user={user} setUser={setUser} />
      <h1>Your name is:{user.name}</h1>
      <h1>Your age is:{user.age}</h1>
    </React.Fragment>
  );
}

export default App;

CODESANDBOX