Why this useFormik is updating the initial value by itself?

I got component structure like this. The actual code is not like this I am just trying to help you visualize.

<EditAssessment>
     <AssessmentForm>
       <AssessmentScheduleCronWeekField>
       </AssessmentScheduleCronWeekField>
     </AssessmentForm>
</EditAssessment>

The thing is when I pass the value from EditAssessment to child component, useformMik is changing the value.

EditAssessment component


// logging the initial value
       {console.log(
          (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[
            Number(assessmentIndex)
          ]
       )}
        {loading ? (
          <Loading size="large" label="Saving..." />
        ) : (
          <AssessmentForm
            initialValues={
              (study.phases[Number(phaseIndex)] as AssessmentPhase).assessments[
                Number(assessmentIndex)
              ] as Assessment
            }
            onSubmit={onSubmit}
            onCancel={onDone}
          />
        )}

Here is the AssessmentForm component

import { Field, FormikProvider, useFormik } from 'formik';

export const AssessmentForm = ({
  initialValues,
  onSubmit,
  onCancel,
}: AssessmentFormProps) => {
  const [scheduleType, setScheduleType] = useState('empty');
  const formik = useFormik({
    initialValues,
    onSubmit,
    validationSchema,
  });
  // *** THE VALUE CHANGE HERE, THIS IS IMPORTANT ***
  console.log(initialValues.schedule);
  console.log(formik.values.schedule);

  return (
    <FormikProvider value={formik}>
      <Form data-cy="assessment-form" onSubmitCapture={formik.handleSubmit}>
        {/* Assessment Questionnaire ID Field */}
        <Field name="questionnaireId" component={AssessmentQuestionIdField} />
        <div>Hello</div>
        {/* Assessment Schedule Type Form */}
        <AssessmentScheduleTypeForm
          assessmentSchedule={initialValues.schedule}
          onTypeChange={setScheduleType}
        />
        <div>Hello 1</div>

        {/* Various Assessment Schedule Forms */}
        {(() => {
          let component = undefined;
          switch (scheduleType) {
            case 'oneTime':
              component = AssessmentScheduleOneTimeField;
              break;
            case 'cronWeek':
              component = AssessmentScheduleCronWeekField;
              break;
          }
          if (component !== undefined) {
            return <Field name="schedule" component={component} />;
          }
          return (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description={<p>Select a Schedule Type</p>}
            />
          );
        })()}

        <AssessmentFormScheduleDescription schedule={initialValues.schedule} />
        {/* Combined Form using `useFormik() */}

        
      </Form>
    </FormikProvider>
  );
};

As you can see there are two console.log statement places 1 in EditAssement and inAssessmentForm`

The value passing to the AssessmentForm change automatically and idk why

Here is a screen shot

These console.log when I reach to the path. If you line 53 console.log is coming from useformMik and that one is updating the value