Complete insertion of a reservation.

src/components/Dashboard/ReservationPage/Reservation/TripStage.tsx

 /* eslint-disable react/jsx-props-no-spreading */
 import React, { FC, useState } from 'react';
-import { Button, TextField, Typography } from '@material-ui/core';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  TextField,
+  Typography,
+} from '@material-ui/core';
 import { Control, Controller } from 'react-hook-form';
 import { InputField } from 'components/Auth/InputField/InputField';
 import { InsertReservationType } from 'types/InsertReservationType';
+import DateFnsUtils from '@date-io/date-fns';
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDateTimePicker,
+} from '@material-ui/pickers';
 
 type TripStageProps = {
   control: Control<InsertReservationType>;
@@ -12,36 +24,56 @@ type TripStageProps = {
 export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
   const [stage, setStage] = useState<string[]>(['']);
   const [value, setValue] = useState<string>('');
-  console.log(control);
 
   const addStage = (): void => {
     setStage([...stage, value]);
   };
 
   return (
-    <>
-      {stage.map((field, index) => (
-        <>
-          <Typography variant="h3" component="h3">
-            Stage {index}
-          </Typography>
-          <Controller
-            as={<TextField variant="outlined" fullWidth label="Location" />}
-            name={`tripStages[${index}].address`}
-            control={control}
-            defaultValue={field}
-          />
-          <InputField
-            name={`tripStages[${index}].estimatedBeAt`}
-            label="Predicted time"
-            type="date"
-            control={control}
-          />
-        </>
-      ))}
-      <Button variant="outlined" onClick={addStage} type="button">
-        Add stage
-      </Button>
-    </>
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Card>
+        {stage.map((field, index) => (
+          <CardContent>
+            <Typography variant="h3" component="h3">
+              Stage {index}
+            </Typography>
+            <Controller
+              as={<input hidden />}
+              name={`tripStages[${index}].number`}
+              control={control}
+              defaultValue={index}
+            />
+            <Controller
+              as={<TextField variant="outlined" fullWidth label="Location" />}
+              name={`tripStages[${index}].location.address`}
+              control={control}
+              defaultValue={field}
+            />
+            <Controller
+              control={control}
+              name={`tripStages[${index}].estimatedBeAt`}
+              as={({ ref, ...rest }) => (
+                <KeyboardDateTimePicker
+                  margin="normal"
+                  id="date-picker-dialog"
+                  label="Date picker dialog"
+                  defaultValue={field}
+                  format="dd/MM/yyyy"
+                  KeyboardButtonProps={{
+                    'aria-label': 'Insert trip stage',
+                  }}
+                  {...rest}
+                />
+              )}
+            />
+          </CardContent>
+        ))}
+        <CardActions>
+          <Button variant="outlined" onClick={addStage} type="button">
+            Add stage
+          </Button>
+        </CardActions>
+      </Card>
+    </MuiPickersUtilsProvider>
   );
 };

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

@@ -37,10 +37,9 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
     const filledReservation = reservation;
     getRoleObject().then((role) => {
       filledReservation.insertedBy = role.id;
+      filledReservation.senior = senior?.id;
+      setReservation(filledReservation);
     });
-    filledReservation.senior = senior?.id;
-    console.log(filledReservation);
-    setReservation(filledReservation);
     handleClose();
   };