How to set a value from an external API to an input field using formik and MUI?

I'm trying to enter a value from an API into a TextField MUI component that uses formik. The idea is that the form is one component and I'm using it into another component in which if a value comes from an API, then it is passed as prop to the form component, if it is not passed, then the TextField component is rendered in order to enter the value manually.

This is the code snippet from the form component, in which if I have a prop passed the value is set to value and the onChange prop of the TextField is managed to set update the value received into the formik input using setFieldValue. I have also enabled the enableReinitialize prop on formik. All of this in order to make the isValid formik prop recognize the value as valid and enable the submit button.

// FormComponent

onst valSchema = Yup.object().shape({
  batchNo: Yup.string()
    .required('Required'),
  item: Yup.string().required('Required'),
  price: Yup.string().required('Required'),
});

const ItemForm = (props) => {
return (
    <Grid container>
      <Grid item xs={12}>
        <Container maxWidth="md">
          <div>
            <Formik
              enableReinitialize
              initialValues={initialValues}
              validationSchema={valSchema}
              onSubmit={(values) => {
                localHandleSubmit(values);
              }}
            >
              {({ dirty, isValid, errors, handleChange, setFieldValue }) => (
                <Form>
                  <Grid container spacing={2}>
                    {props.batchValue ? (
                      <Grid item xs={12}>
                        <TextField name="batchNo" label="Batch No" value={props.batchValue} onChange={(e) => {
                            handleChange(e);
                            setFieldValue('batchNo', props.batchValue);}} />
                      </Grid>
                    ) : (
                      <Grid item xs={12}>
                        <TextField name="batchNo" label="Batch No" />
                      </Grid>
                    )}
                    <Grid item xs={6}>
                      <TextField name="item" label="Item" />
                    </Grid>
                    <Grid item xs={6}>
                      <TextField name="price" label="Price" />
                    </Grid>
                    <Grid item xs={12}>
                      <Button
                        fullWidth
                        variant="contained"
                        disabled={!isValid || !dirty}
                        type="submit"
                      >
                        {' '}
                        ADD
                      </Button>
                    </Grid>
                  </Grid>
                </Form>
              )}
            </Formik>
          </div>
        </Container>
      </Grid>
    </Grid>
  );
};

This is how I'm passing the value to the form component.

<DialogContent dividers>
       <FormComponent batchValue={batch} />
</DialogContent>

The problem I'm having is that the submit button is not enable, thus I found out that the isValid formik prop is false and the error for this value is required, so formik is not recognizing the value passed from the API as valid.

I would like to know how I can make this work.