How to get a value using formik with a MUI component?

Question

I am using Formik in order to submit an array of components using MUI sliders.

I have created a slider component using the MUI library. You can see that in the code below in the declaration of:

import SliderSchedule from ....

So, I searched an example and I found a way to create and delete components and I copy from them. However now I want to also submit the result. But when I click the button I get no values.

As you can see I have the Comp1 that I declare the array const [sliderSchedule, setSliderSchedule]. Which has to contain values like: [(100, 200), (150, 300), (400, 700), ...]. Then I have the two function addHandeler and deleteHandeler that creates and deletes the components. This works fine.

Then we have the formik and that's the last thing that I have implemented after creating the the Comp2 that it's the "component" that we are creating with the addHandeler and deleteHandeler which creates the slider and a button to eliminate:

As you can see is very simple. And it works fine. But then when I click submit I get no values:

Thank you in advance.

import React from 'react';
import { useDispatch, useSelector } from "react-redux";
import history from "../../../history";
import { nanoid } from "nanoid";

/* MUI */
import { Container, Grid, Typography, Paper, TextField } from '@material-ui/core'

/* MUI edited Components */
import Appbar from '../../../components/Appbar';
import Button from '../../../components/Button';
import Translator from '../../../components/Translator';
import SliderSchedule from '../../../components/SliderSchedule';

/* Formik */
import { Formik, Form } from 'formik';
import * as Yup from "yup";

export default function Slots() {
  const dispatch = useDispatch();

  const paperStyle = { padding: 20, height: 'auto', width: 'auto', margin: "20px auto", backgroundColor: "#A9A9A9" }

  function Comp2({ deleteHandeler, id, props }) {
    return (
      <Grid container item xs={12}>
        <Grid item xs={11}> <SliderSchedule id={id} name={props.values.name} value={props.values.time} onChange={time => props.setFieldValue("time", time.target.value)} renderInput={(props) => <TextField {...props} />} /> </Grid>
        <Grid item xs={1}> <Button type="button" style="Close" onClick={deleteHandeler}>CloseIcon</Button> </Grid>
      </Grid>
    );
  }

  const formSchema = {
    time: []
  };

  function Comp1() {
    const [sliderSchedule, setSliderSchedule] = React.useState([]);
    const addHandeler = () => { setSliderSchedule(sliderSchedule => [...sliderSchedule, nanoid()]) };
    const deleteHandeler = (removeId) => setSliderSchedule((sliderSchedule) => sliderSchedule.filter((id) => id !== removeId));
    return (
      <Formik
        initialValues={formSchema}
        onSubmit={values => {
          console.log("Monday", values);
        }}
        render={props => (
          <Form>
            <Grid container justifyContent="center">
              {sliderSchedule.map((id) => (<Comp2 key={id} id={id} deleteHandeler={() => deleteHandeler(id)} props={props} />))}
              <Button variant="outlined" color="info" style="AddSlider" startIcon="AddIcon" onClick={addHandeler}> <Translator page="productSchedule" text="buttonAddSlider"></Translator> </Button>
              <Button type="submit" variant="contained" color="primary"> Submit </Button>
            </Grid>
          </Form>
        )}
      />
    );
  }

  return (
    <>
      <Appbar></Appbar>
      <Container>
        <Grid container alignItems="flex-end">
          {/* LA SUMA DE TOTS ELS xs={x} ha de ser xs={12} */}
          <Grid container justifyContent="flex-start" item xs={12}>
            <Typography variant="h3"> <Translator page="productSchedule" text="typographyTitle"></Translator> </Typography>
            <Typography variant="h3"> &#128197; </Typography>
          </Grid>
          <Grid item xs={12}>
            <Paper elevation={10} style={paperStyle}>
              <Grid container alignItems="flex-end">
                <Grid container justifyContent="center" item xs="auto"> <Typography variant="h3"> <Translator page="productSchedule" text="typographyMonday"></Translator> </Typography> </Grid>
                <Grid container justifyContent="center" item xs="auto"> <Comp1 /> </Grid>
              </Grid>
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </>
  );
}