Trip stage insertion component.

src/components/Dashboard/ReservationPage/Reservation/InsertReservationProps.ts

-type Location = {
+export type Location = {
   address: string;
 };
 

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

 /* eslint-disable react/jsx-props-no-spreading */
-import { Button, Input, TextField } from '@material-ui/core';
-import Timeline from '@material-ui/lab/Timeline';
-import TimelineItem from '@material-ui/lab/TimelineItem';
-import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
-import TimelineConnector from '@material-ui/lab/TimelineConnector';
-import TimelineContent from '@material-ui/lab/TimelineContent';
-import TimelineDot from '@material-ui/lab/TimelineDot';
-import { InputField } from 'components/Auth/InputField/InputField';
 import React, { FC, useState } from 'react';
-import { Control, Controller, useFormContext } from 'react-hook-form';
+import { Button, TextField } from '@material-ui/core';
+import { Control, Controller } from 'react-hook-form';
 import { InsertReservationProps } from './InsertReservationProps';
 
 type TripStageProps = {
@@ -16,51 +9,31 @@ type TripStageProps = {
 };
 
 // FIX: Data is flushed onChange. Similar problem in seniorSearch.
+// What about this https://codesandbox.io/s/usefieldarray-wfbjt?file=/src/index.js
+// Usefields.
+// https://codesandbox.io/s/usefieldarray-virtual-input-v9wyw
+// https://codesandbox.io/s/react-hook-form-usefieldarray-7bpmk
 export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
   const [stage, setStage] = useState<string[]>([]);
   const [value, setValue] = useState<string>('');
 
-  const addStage = (onChange: any): void => {
+  const addStage = (): void => {
     setStage([...stage, value]);
-    onChange(stage);
   };
 
   return (
-    <Controller
-      name="tripStages"
-      control={control}
-      defaultValue={[]}
-      as={({ onChange }) => (
-        <>
-          <Timeline>
-            {stage.map((el, key) => (
-              <TimelineItem>
-                <TimelineSeparator>
-                  <TimelineDot />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>{el}</TimelineContent>
-              </TimelineItem>
-            ))}
-          </Timeline>
-          <div>
-            <TextField
-              id="address"
-              label="address"
-              type="text"
-              variant="outlined"
-              onChange={(e) => setValue(e.target.value)}
-            />
-            <Button
-              variant="outlined"
-              type="button"
-              onClick={() => addStage(onChange)}
-            >
-              Add
-            </Button>
-          </div>
-        </>
-      )}
-    />
+    <>
+      {stage.map((field, index) => (
+        <Controller
+          as={<TextField />}
+          name={`tripStages[${index}].address`}
+          control={control}
+          defaultValue={field}
+        />
+      ))}
+      <Button variant="outlined" onClick={addStage} type="button">
+        Add stage
+      </Button>
+    </>
   );
 };

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

-import React, { FC } from 'react';
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, useState } from 'react';
 import {
   Dialog,
   DialogActions,
@@ -6,14 +7,14 @@ import {
   DialogContentText,
   DialogTitle,
   Button,
+  TextField,
 } from '@material-ui/core';
 import { setReservation } from 'api/setReservation';
-import { useReservations } from 'hooks/useReservations';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { InputField } from 'components/Auth/InputField/InputField';
-import { SeniorSearch } from 'components/Dashboard/ReservationPage/Reservation/SeniorSearch';
-import { TripStage } from './Reservation/TripStage';
 import { InsertReservationProps } from './Reservation/InsertReservationProps';
+import { TripStage } from './Reservation/TripStage';
+import { SeniorSearch } from './Reservation/SeniorSearch';
 
 type ReservationDialogProps = {
   handleClose: () => void;
@@ -23,14 +24,13 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
   handleClose,
   isOpen,
 }: ReservationDialogProps) => {
-  const { control, handleSubmit } = useForm<InsertReservationProps>({
+  const { control, handleSubmit, register } = useForm<InsertReservationProps>({
     mode: 'onSubmit',
   });
 
   const onSubmit: SubmitHandler<InsertReservationProps> = (
     reservation: InsertReservationProps,
   ) => {
-    console.log(reservation);
     setReservation(reservation);
     handleClose();
   };
@@ -50,7 +50,6 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
             </DialogContentText>
 
             <SeniorSearch control={control} />
-
             <InputField
               name="number"
               label="Phone number"
@@ -63,7 +62,6 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
               type="text"
               control={control}
             />
-
             <TripStage control={control} />
           </DialogContent>
           <DialogActions>