How to create multiple Formik fields via map?

Question

React

There is data in the form of an object

type ContactsType = {
  github: string 
  vk: string 
  facebook: string 
  instagram: string 
  twitter: string 
  website: string
  youtube: string 
  mainLink: string 
}

that come from the server. I iterated over the keys of the object through the map and created only one form to dynamically substitute the keys of the object, but I don’t understand how this can be done, because the name needs a string, and the value needs the exact path to the object and the key in the initialState in the form, for a long time I'm playing with this little thing, who knows how this can be solved, please unsubscribe, I will be grateful

initialValues={{
          fullName: profile.fullName,
          lookingForAJob: profile.lookingForAJob,
          lookingForAJobDescription: profile.lookingForAJobDescription,
          aboutMe: profile.aboutMe,
          contacts: profile.contacts,
        }}

{Object.keys(profile.contacts).map((key, inx) => {
                  
                  return (
                    <React.Fragment>
                      <TextField
                        key={key}
                        className={classes.gutters}
                        margin='dense'
                        fullWidth
                        variant='outlined'
                        id='standard-basic'
                        // name={`contacts.${key}`}
                        label={key}
                        // value={values.contacts.}
                        onBlur={handleBlur}
                        onChange={handleChange}
                        // error={touched.contacts?.github && Boolean(errors.contacts?.github)}
                        // helperText={touched.contacts?.github && errors.contacts?.github}
                      />
                    </React.Fragment>
                  )
                })}

An example with a working form of a separate key:

<TextField
                  className={classes.gutters}
                  margin='dense'
                  fullWidth
                  variant='outlined'
                  id='standard-basic'
                  name='contacts.facebook'
                  label='facebook'
                  value={values.contacts.facebook}
                  onBlur={handleBlur}
                  onChange={handleChange}
                  error={touched.contacts?.facebook && Boolean(errors.contacts?.facebook)}
                  helperText={touched.contacts?.facebook && errors.contacts?.facebook}
                />

Answer 1

{Object.keys(profile.contacts).map((key) => {
                  return (
                    <React.Fragment>
                      <TextField
                        key={key}
                        className={classes.gutters}
                        margin='dense'
                        fullWidth
                        variant='outlined'
                        id='standard-basic'
                        name={`contacts.${key}`}
                        label={key}
                        value={`values.contacts.${key}`}
                        onBlur={handleBlur}
                        onChange={handleChange}
                        error={`touched.contacts?.${key}` && Boolean(`errors.contacts?.${key}`)}
                        helperText={`touched.contacts?.${key}` && `errors.contacts?.${key}`}
                      />
                    </React.Fragment>
                  )
})}