FieldArray with ArrayHelpers

ArrayHelpers.js

<Form style={{ padding: 20 }}>
  <FieldArray
    name="diet"
    render={(arrayHelpers) => (
      <div>
        <Button
          onClick={() => {
            arrayHelpers.push({
              food_name: "",
              quantity: "",
            });
          }}
        >
          Add Food
        </Button>
        {formProps.values.diet.map((diet, index) => (
          <Row style={{ paddingBottom: 10 }} key={index}>
            <Col>
              <Label>Food</Label>
              <Field
                component={CustomInput}
                type="text"
                name={`diet.${index}.food_name`}
              />
            </Col>
            <Col>
              <Label>Quantity</Label>
              <Field
                component={CustomInput}
                type="text"
                name={`diet.${index}.quantity`}
              />
            </Col>
            <Col style={{ paddingTop: 30 }}>
              <Button onClick={() => arrayHelpers.remove(index)}>-</Button>
              <Button onClick={() => arrayHelpers.insert(index, "")}>+</Button>
            </Col>
            <Col style={{ paddingTop: 30 }}>
              <Button onClick={() => arrayHelpers.move(index, index - 1)}>Up</Button>
              <Button onClick={() => arrayHelpers.move(index, index + 1)}>Down</Button>
            </Col>
          </Row>
        ))}
      </div>
    )}
  />
  <Button color="success" type="submit">
    Submit
  </Button>
</Form>