I’m working on a React application where I’m navigating from a Task component to a PersonDetails component, and I’m encountering issues with updating and reflecting form data correctly.

I am only focusing on the name input field, so that user can change its value, while I am passing static values from the parent component

Here is a snippet of the relevant code:

Task Component:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PersonDetails from './PersonDetails';

export default function Task() {
  const navigate = useNavigate();
  let [formData, setformData] = useState({
    uName: '',
    uGender: '',
    uMedals: 0,
  });
  let [submitData, setsubmitData] = useState([]);

  let handleForm = (e) => {
    let { name, value } = e.target;
    if (name === 'uMedals') {
      value = parseInt(value);
      if (value <= 0) {
        value = 0;
      }
      if (value > 20) {
        value = formData.uMedals;
      }
    }
    setformData((formData) => ({
      ...formData,
      [name]: value,
    }));
  };

  let handleUpdate = (indexNumber) => {
    let updatedRow = submitData[indexNumber];
    setformData({
      uName: updatedRow.uName,
      uGender: updatedRow.uGender,
      uMedals: updatedRow.uMedals,
    });
    navigate('/PersonDetails', { state: { formData } });
  };

  return (
    <div className='parent-container'>
      {/* Form and other UI elements */}
      <PersonDetails
        handleForm={handleForm}
        handleSubmit={handleSubmit}
      />
    </div>
  );
}

PersonDetails Component:

import { useLocation } from 'react-router-dom';


export default function PersonDetails({
  handleForm,
  handleSubmit,
}) {
  const location = useLocation();
  const {formData} = location.state
  
  return (
    <>
      <div className='parent-container'>
        <h1 className='h-pDetail'>PersonDetails</h1>
        <div className='content-wrapper'>
        <div className='left parent-det'>
          <form className='form-wrapper' onSubmit={handleSubmit}>
            <div className='name-wrapper'>
              <label>Name</label>
              <input
                type='text'
                name='uName'
                onChange={handleForm}
                value={formData.uName}
                pattern='[A-Za-z]*'
                style={{ padding: ' 5px' }}
              />
            </div>
         </form>
        </div>
        </div>
      </div>