can't edit data in Textfield in reactjs

I'm trying to edit the api data on a MUI datagrid. I want a modal form to pop on clicking the edit icon. Everything works fine, I'm getting the data to be edited and all that. thing is the data I'm getting in textfield for edit, is not changing the value. it's not taking any inputs I'm giving, it stays the same. what should I do to make the textfields editable ? Thanks in advance.

export default function ContactsCard(props) {
 const [ContactData, setContactData] = useState([]);
 const [open, setOpen] = useState(false);
 const [formInputData, setformInputData] = useState(
   {
     name: '',
     details: '',
   }
 );

 const handleChange = (evnt) => {
   const newInput = (data) => ({
     ...data,
     [evnt.target.name]: evnt.target.value
   });
   setformInputData(newInput);
 }

 const showData = () => {
   axios.get('http://localhost:8006/api/v2/get/beneficiaries-list').then(function (res) {
     try {
       var result = res.data;
       // console.log(result.data)
       setContactData(result.data)
     }
     catch (error) {
       console.log(error)
     }
   })
 }

 const handleSubmit = (evnt) => {
   evnt.preventDefault();
   const formData = new FormData();    //formdata object
   formData.append('nickname', formInputData.name);   //append the values with key, value pair
   formData.append('target', formInputData.details);
   const config = {
     headers: { 'content-type': 'multipart/form-data' }
   }
   axios.post('http://localhost:8006/api/v2/save/beneficiary', formData, config)
     .then(response => {
       if (response.data.success === true) {
         showData()
         alert(response.data.message)
       }
     })
     .catch(error => {
       alert(error.message);
     });
   setformInputData({ name: "", details: "" });
   setOpen(false);
 }

 const handleEdit = (id) => {
   var edit_id = id.row.id
   console.log(edit_id)
   setOpen(true)
   setformInputData(ContactData.find((data) => data.id === edit_id))
   setOpen(true)
 }

 const handleOpen = () => setOpen(true)

 const handleClose = () => setOpen(false);

 useEffect(() => {
   showData();
 }, [])

 const handleDelete = (id) => {
   var del_id = id.row.id
   console.log(del_id)
   axios.post('http://localhost:8006/api/v2/remove/beneficiary/', { id: del_id }).then(res => {
     console.log(res.data)
     if (res.data.success === true) {
       alert(res.data.message)
       showData();
       console.log('ajh');
     }
   })
 };

 const columns = [
   { field: 'name', headerName: 'Nick Name', width: '130' },
   { field: 'details', headerName: 'Deposit address', width: '130' },
   {
     field: 'actions',
     type: 'actions',
     width: '130',
     headerName: 'Actions',
     cellClassName: 'actions',
     renderCell: (id) => {
       return (
         <>
           <IconButton color="primary" onClick={(e) => { handleEdit(id) }}>
             <EditIcon />
           </IconButton>
           <IconButton color="error"  onClick={(e) => {
             handleDelete(id)
           }}>
             <DeleteIcon />
           </IconButton>
         </>
       );
     },
   },
 ];

return (
<Card {...props}>
  <CardContent>
    <ContactDataGrid rows={ContactData} columns={columns} />
    <Modal
      aria-labelledby="transition-modal-title"
      aria-describedby="transition-modal-description"
      open={open}
      onClose={handleClose}
      closeAfterTransition
      BackdropComponent={Backdrop}
      BackdropProps={{
        timeout: 500,
      }}
    >
      <Fade in={open}>
        <FormControl sx={style} mt={1} >
          <Typography sx={{ fontSize: 16, fontWeight: 'bold' }} color="text.secondary" gutterBottom>
            Edit Contact
          </Typography>
          <Stack flexDirection='column' gap={1.5} mt={1}>
            <TextField autoFocus required
              id="filled-hidden-label-small"
              label="Nick Name" variant="outlined" size="small"
              onChange={handleChange}
              value={formInputData.name}
              name="Nick Name"
              className="form-control"
            />
            <TextField required
              id="filled-hidden-label-small"
              label="Deposit Address" variant="outlined" size="small"
              onChange={handleChange}
              value={formInputData.details}
              name="Amount"
              className="form-control"
            />
          </Stack>
          <Stack flexDirection='row' justifyContent={'center'} gap={1.5} mt={1}>
            <Button
              variant="contained"
              type="submit" color="error"
              onClick={handleClose}
              sx={{ alignSelf: 'center' }} >Cancel</Button>
            <Button
              variant="contained"
              type="submit"
              onClick={handleSubmit}
              sx={{ alignSelf: 'center', backgroundColor: '#000073' }} >Submit</Button>
          </Stack>
        </FormControl>
      </Fade>
    </Modal>
  </CardContent>
</Card>

); }

Your handleChange function is updating the new value in event.target.name but, the name doesn't match with the value. You can try changing the name to match the value getter:

<TextField autoFocus required
  id="filled-hidden-label-small"
  label="Nick Name" variant="outlined" size="small"
  onChange={handleChange}
  value={formInputData.name}
  name="name"                    // this changed
  className="form-control"
/>
<TextField required
  id="filled-hidden-label-small"
  label="Deposit Address" variant="outlined" size="small"
  onChange={handleChange}
  value={formInputData.details}
  name="details"                   // this changed
  className="form-control"
/>