MUI Textfield does not update State

I have an app which used various inputs which is functioning. For example, I have an initial dataset which is built from an API request, see below:

  const [userData, setuserData] = useState([])


  const companyuser = useSelector(state=>state.companyuser.currentUser)

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

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 data is then mapped across the app, and will update when used. For example:

<UpdateUserDetailsSingular>
            {userInputDataSchema.map((input) => (
                <FormInput className="formInput" key={input.companyTitle}>
                  {input.id == 1 ?
                  <UserInput type={input.type} name="companyTitle" placeholder={input.placeholder}
                  onChange={handleChange}  />
                  : null}
                </FormInput>
                ))}
          </UpdateUserDetailsSingular>

This is functioning. When I use the MUI larger input textfield, it does not update my state. It will dispaly the placeholder text, but if you type it will not handle it.

What is the reason?

                  {userInputDataSchema.map((input) => (
                      <div>
                        {input.id == 9 ?
                        <TextField
                        name="whyWork_1"
                        label="Diversity & Inclusion at Australia Post"
                        multiline
                        rows={15}
                        defaultValue={input.placeholder}
                        key={input.placeholder}
                        fullWidth 
                        fullHeight
                        type={input.type}
                        handleChange={handleChange}
                      /> : null}

                      </div>
                    ))}
                  </InputBoxContainer>

Does