How to display Formik dynamic fields?

Question

React

There is a contacts object that comes from the server.

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

How to add dynamic key in formik in name and value values?
I will be grateful for the answer

Current code (not working)

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

{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?.github && Boolean(errors.contacts?.github)}
                        helperText={touched.contacts?.github && errors.contacts?.github}
                      />
                    </React.Fragment>
                  )
                })}