Когда я вписываю что-либо во второе текстовое поле, значение, введенное в предыдущем текстовом поле, стирается. Я использую Formik и открываю форму внутри модального

Question

     <Formik
        enableReinitialize
        initialValues={{
          name: EditSizeTypeName,
          sizes: chips,
        }}
        onSubmit={(values, { setSubmitting, resetForm }) => {
          // values.sizes = chips
          console.log('----on submit of size type reached----');
          console.log(values);
          setErrorMessage('');
          if (!editSizeTypeSave) {
            postRequest('/create-constumeSize-types', {
              ...values,
              selectedEvents,
            })
              .then(d => {
                console.log('create-constumeSize-types route called...', d);
                getSizeTypeData();
                if (d.code == 1) {
                  setOpenNewSizeTypeModal(false);
                  setEditId('');
                  setEditSizeTypeValues({
                    name: '',
                    sizes: [],
                  });
                  setSelectedEvents([]);
                  resetForm();
                  window.alert('Costume Type Created Successfully!');
                } else {
                  throw { message: d.message };
                }
              })
              .catch(err => {
                console.log(err);
                if (
                  err.message.startsWith('UserStaffs validation failed: ')
                ) {
                  setErrorMessage(
                    err.message.split('UserStaffs validation failed: ')[1],
                  );
                } else if (err.message.startsWith('E11000')) {
                  const theError = err.message.split('{')[1].split('}')[0];
                  setErrorMessage(theError + ' is already taken');
                }
              });
          } else {
            postRequest(`/edit-costumeSize-types/${uniqueSizeTypeId}`, {
              ...values,
              selectedEvents,
            })
              .then(d => {
                console.log(d);
                getSizeTypeData();
                if (d.code == 1) {
                  setEditId('');
                  setEditValuesSizeType({
                    name: '',
                    sizes: [],
                  });
                  setSelectedEvents([]);
                  resetForm();
                  setOpenNewSizeTypeModal(false);
                  window.alert('Size Type edited successfully!');
                } else {
                  throw { message: d.message };
                }
              })
              .catch(err => {
                console.log(err);
                if (
                  err.message.startsWith('UserStaffs validation failed: ')
                ) {
                  setErrorMessage(
                    err.message.split('UserStaffs validation failed: ')[1],
                  );
                } else if (err.message.startsWith('E11000')) {
                  const theError = err.message.split('{')[1].split('}')[0];
                  setErrorMessage(theError + ' is already taken');
                }
              });
          }
        }}
        validationSchema={Yup.object().shape({
          name: Yup.string().required('Required'),
        })}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting,
        }) => (
          <form onSubmit={handleSubmit}>
            <div style={modalStyle} className={classes.paper}>
              <Grid container>
                <Grid item md={12}>
                  <Typography
                    color="primary"
                    variant="h6"
                    style={{ paddingLeft: '1rem' }}
                  >
                    New Size Type:
                  </Typography>
                  <TextField
                    id="outlined-dense"
                    name="name"
                    label="Name"
                    value={values.name}
                    onChange={handleChange}
                    className={classNames(
                      classes.addSectionTitleTextField,
                      classes.dense,
                    )}
                    variant="outlined"
                  />
                  {errors.name && touched.name && (
                    <div className={classes.inputFeedback}>
                      {errors.name}
                    </div>
                  )} 
                </Grid>
                <Grid item xs={12}>
                  <ChipInput
                    className={classNames(
                      classes.addSectionTitleTextField,
                      classes.dense,
                    )}
                    label="Sizes"
                    variant="outlined"
                    name="sizes"
                    value={chips}
                    onAdd={chip => {
                      console.log('selected size ' + chip);
                      setChips([...chips, chip]);
                    }}
                    onDelete={(chip, index) => {
                      console.log("deleted chip " + chip);
                      setChips(chips => chips.filter(c => c !== chip));
                    }}
                  />
                   {errors.sizes && touched.sizes && (
                    <div className={classes.inputFeedback}>
                      {errors.sizes}
                    </div>
                  )}
                </Grid>

следовательно, когда я вписываю что-то во 2-е текстовое поле (фишки) в мою форму из пользовательского интерфейса, значения 1-го поля стираются. используемый модал имеет материал UI. что вызывает это событие? Также, когда я удаляю фишку, значения 1-го поля стираются.

В целом, когда я открываю модальное поле и вводлю детали в 1-е поле, а затем во 2-е, значения в 1-м поле стираются. Затем я снова вводю детали в 1-е поле. Если я удалю любую фишку (во 2-м поле), 1-е поле снова будет стерто.