React MUI TextField Fails to Update local State

Question

I have a multi-form style page in which I have functioning forms which will contain user data. For example, this is a working component and how it functions.

          <UpdateUserDetailsSingularVert>
            <Typography variant="subtitle1sub" color="secondary">
                Country
            </Typography>
            {userInputDataSchema.map((input) => (
                <FormInput className="formInput" key={input.locationCountry}>
                  {input.id == 8 ?
                  <UserInput type={input.type} name="locationCountry" placeholder={input.placeholder}
                  onChange={handleChange}  />
                  : null}
                </FormInput>
                ))}
          </UpdateUserDetailsSingularVert>

With the above component, it will handle the change through a use effect:

  const [userData, setuserData] = useState([])
  const [input, setInput] = useState("")
  const [value, setValue] = React.useState(0);



  useEffect(()=> {
    const getUserData = async ()=>{
      try{
          const companyResponse = await userRequest.get(`companyprofile/findCompany/${companyuser._id}`);
          setuserData(companyResponse.data.others)
      }catch(err){}
    };
    getUserData()
},[])

//pass in the event
const handleChange = (e) => {
  //include all in the state earlier with spread
  //update only position, which is input
  setuserData(prev=>({...prev, [e.target.name]:e.target.value}))
  console.log(userData)
}

This state also functions of an array with placeholder data from an API request

const userInputDataSchema = [
  {
      id: 1,
      label: "companyTitle",
      type: "companyTitle",
      placeholder: userData.companyTitle,
  },
  {
      id: 2,
      label: "surname",
      type: "surname",
      placeholder: userData.surname
  },
  {
      id: 3,
      label: "Email",
      type: "email",
      placeholder: userData.email
  },
  {
    id: 4,
    label: "Position",
    type: "position",
    placeholder: userData.position
  },
  {
    id: 5,
    label: "User Image",
    type: "image",
    placeholder: userData.userImage
  },
  {
    id: 6,
    label: "Professional Bio",
    type: "professionalBio",
    placeholder: userData.employees
  },
  {
    id: 7,
    label: "locationCity",
    type: "locationCity",
    placeholder: userData.locationCity
  },
  {
    id: 8,
    label: "locationCountry",
    type: "locationCountry",
    placeholder: userData.locationCountry
  },
  {
    id: 9,
    label: "whyWork_1",
    type: "whyWork_1",
    placeholder: userData.whyWork_1
  },

];

This all works fine and my data works. If I console log on change, it will update on each input. However this does not work when I try to use the MUI textfield.

                <TabPanel value={value} index={0}>
                  {userInputDataSchema.map((input) => (
                    <div>
                      {input.id == 9 ?
                      <TextField
                      name="whyWork_1"
                      id="outlined-multiline-static"
                      label="Diversity & Inclusion at Australia Post"
                      multiline
                      rows={15}
                      defaultValue={userData.whyWork_1}
                      fullWidth 
                      fullHeight
                      type={input.type}
                      handleChange={handleChange}
                    /> : null}
                    </div>
                  ))}
                </TabPanel>

I cannot figure out for what reason this data is not being passed correctly to React state.

Can anyone see my error?

Answer 1

The TextField has a prop defaultValue={userData.whyWork_1}, few points -

1. In the API response there is no whyWork_1 field, this is a value for key label, did you meant {userData.label}?
2. defaultValue should be used for uncontrolled components. You should use value (instead of defaultValue) for controlled components.

<TextField
  .....
  value={userData.label}
  .....
/>