What is causing this error. I am trying to update the username field in the parent state with a reusable function. and getting the following error. It seems as though I am able to update the username value once. But following that, it replaces the state entirely then falls over and throws an error.
const ProfileEdit: React.FC<Props> = ({ setIsModalOpen }) => { const user = useSelector(state => state.userData.user); // Create user details const [userDetails, setUserDetails] = useState({ username: user.username, firstName: user.userName, lastName: user.lastName, gender: user.gender, dateOfBirth: user.dateOfBirth, city: user.city }); // Change specific detail when input changes. This comes from the state value in the child component const changeVal = (formData, entry, val) => { setUserDetails((formData[entry] = val)); console.log(userDetails); };return (<Modal animationType="slide"><Container><EditProfileInput inputTitle="Username" changeVal={changeVal} formData={userDetails} entry="username" /> );};// Child Componentconst EditProfileInput: React.FC<Props> = ({ inputTitle, changeVal, formData, entry}) => { return (<Container><InputHeader>{inputTitle}</InputHeader><Input><InputText name={inputTitle} onChangeText={text => changeVal(formData, entry, text)} /></Input></Container> );};