Setting value on TextField input text become non editable - reactjs

Question

I am creating a form for updating the data from mongodb I was able to fetch the data and added onchange if the currentId exist then all the data will populate on the form but, my problem is I cannot edit or I cannot type anything on the input to edit the value. I really need your eyes to see something that have missed or missed up. Thanks in advance y'all.
Profile container
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getProfile } from '../../../actions/profile'; //fetch method
import Profile from './Profile';
function Index() {
const dispatch = useDispatch();
const posts = useSelector((state) => state.posts);
const currentId = useState(null);
useEffect(() => {
dispatch(getProfile());
}, [currentId, dispatch]);
return (
<div className="custom-container">
{posts.map((profile) => (
<div key={profile._id}>
<Profile profile={profile} currentId={currentId} />
</div>
))}
</div>
);
}
export default Index;
Profile form component
import './Profile.css';
import { React, useState, useEffect } from 'react';
import Button from 'react-bootstrap/Button';
import { TextField } from '#material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { updateProfile } from '../../../actions/profile';
const Profile = ({ profile, currentId }) => {
const dispatch = useDispatch();
currentId = profile._id;
const [postData, setPostData] = useState(
{
profile: {
name: "",
description: "",
email: "",
number: "",
}
}
);
const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);
useEffect(() => {
if(post) setPostData(post);
}, [post])
const handleSubmit = (e) => {
e.preventDefault();
if(currentId) {
dispatch(updateProfile(currentId, postData));
}
}
// const [ImageFileName, setImageFileName] = useState("Upload Profile Picture");
// const [fileName, setFileName] = useState("Upload CV");
return (
<form autoComplete="off" noValidate className="form" onSubmit={handleSubmit}>
<TextField
id="name"
name="name"
className="name"
label="Full Name"
variant="outlined"
value={postData.profile.name}
onChange={(e) => setPostData({ ...postData, name: e.target.value })}
/>
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
rows={4}
variant="outlined"
size="small"
className="mb-3"
name="description"
value={postData.profile.description}
onChange={(e) => setPostData({ ...postData, description: e.target.value })}
fullWidth
/>
<TextField
id="email"
label="Email"
variant="outlined"
size="small"
className="mb-3"
name="email"
value={postData.profile.email}
onChange={(e) => setPostData({ ...postData, email: e.target.value })}
/>
<TextField
id="phone"
label="Phone Number"
variant="outlined"
size="small"
name="phone"
value={postData.profile.number}
onChange={(e) => setPostData({ ...postData, number: e.target.value })}
/>
<Button variant="light" type="submit" className="Save">Save</Button>
</form>
);
}
export default Profile;

Answer 1

If you'd look at the name field for example, you can see the value is postData.profile.name while onChange your setting postData.name.
Try setting the profile object, for example:
onChange={(e) => setPostData({ ...postData, profile: { ...postData.profile, name: e.target.value } })}