How does a parent know about the state of a list of child forms using formik?

Question

I have a form consisting of a list of building materials which can be materials already registered for the construction and new materials:

The MaterialBar:

function MaterialBar({
  materialBarId,
  material,
  onDelete,
  onChange,
}: MaterialBarProps) {
  const { values, handleChange } = useFormik<MaterialBar>({
    initialValues: material,
    onSubmit: console.log,
    enableReinitialize: true,
  });

  const updateField = (event) => {
      handleChange(event);
      onChange(materialBarId, values);
  };

  return (
    <DropdownWrapper>
      <Dropdown
        label="Material"
        items={/* A list of available materials */}
        selectedItem={values.material}
        onSelect={updateField}
      />
      .... Other fields
      <TextField
        name="amount"
        id="material-amount"
        label="Amount"
        type="number"
        onChange={updateField}
      />
      <DeleteButton onClick={() => onDelete(materialBarId)}>
        <img src={remove} />
      </DeleteButton>
    </DropdownWrapper>
  );
}

The parent (ConstructionMaterials):

function ConstructionMaterials({
  project,
  materials,
  attachMaterial,
}: ProjectMaterialsProps) {
  const [allMaterials, setAllMaterials] = useState<IProjectMaterial[]>(
    getProjectMaterialsFrom(project.materials)
  );

  const saveAllMaterials = () => {
    allMaterials.forEach((newMaterial) => {
      if (newMaterial.isNew) {
        attachMaterial(newMaterial);
      }
    });
  };

  const updateNewMaterial = (
    materialBarId: number,
    updatedMaterial: MaterialBar
  ): void => {
    const updatedList: IProjectMaterial[] = allMaterials.map((material) => {
      if (material.projectMaterialId === materialBarId) {
        return {
          ...material,
          materialId: materials.find(
            (currentMaterial) =>
              currentMaterial.name === updatedMaterial.material
          )?.id,
          type: updatedMaterial.type,
          length: updatedMaterial.length,
          width: updatedMaterial.width,
          value: updatedMaterial.amount,
        };
      }
      return material;
    });
    setAllMaterials(updatedList);
  };

  // Adds a new empty material to the list
  const addMaterial = (): void => {
    setAllMaterials([
      ...allMaterials,
      {
        projectMaterialId: calculateMaterialBarId(),
        projectId: project.id,
        isNew: true,
      },
    ]);
  };

  return (
    <>
      {allMaterials.map((material) => {
        const materialBar: MaterialBar = {
          material: material.name || "",
          type: material.type || "",
          amount: material.value || 0,
          length: material.length || 0,
          width: material.width || 0,
        };
        return (
          <AddMaterialBar
            key={material.projectMaterialId}
            materialBarId={material.projectMaterialId!}
            materials={materials}
            onDelete={removeMaterial}
            onChange={updateNewMaterial}
          />
        );
      })}
      <Button onClick={() => saveAllMaterials()}>
        {texts.BUTTON_SAVE_MATERIALS}
      </Button>
    </>
  );
}

I have a hard time figuring out how to manage the list of materials. I use Formik (the useFormik hook) in the MaterialBar to take care of the values of each field.

My challenge is how to keep all the data clean and easily pass it between the components while knowing which materials are new and which already exist. If I just use Formik in the MaterialBar, then ConstructionMaterials does not know about the changes made in each field and it needs the updated data because it calls the backend with a "save all" action (the "Save"-buttons in the image should not be there, but they are my temporary fix).

To circumvent this, I also keep track of each material in ConstructionMaterials with the onChange on MaterialBar, but that seems redundant, since this is what Formik should take care of. I have also added a isNew field to the material type to keep track of whether it is new, so I don't two lists for existing and new materials.

I have had a look at FieldArray in ConstructionMaterials, but shouldn't Formik be used in the child, since the parent should just grab the data and send it to the API?

So: is there a clever way to handle a list of items where the parent can know about the changes made in the childs form, to make a bulk create request without the parent having to also keep track of all the objects in the children?

Sorry about the long post, but I don't know how to make it shorter without loosing the context.