Attach controller to save array into form.

Data is flushed when input value is changed. See issue #12.

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

@@ -8,41 +8,59 @@ 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 { useFormContext } from 'react-hook-form';
+import { Control, Controller, useFormContext } from 'react-hook-form';
+import { InsertReservationProps } from './InsertReservationProps';
 
-export const TripStage: FC = () => {
+type TripStageProps = {
+  control: Control<InsertReservationProps>;
+};
+
+// FIX: Data is flushed onChange. Similar problem in seniorSearch.
+export const TripStage: FC<TripStageProps> = ({ control }: TripStageProps) => {
   const [stage, setStage] = useState<string[]>([]);
   const [value, setValue] = useState<string>('');
 
-  const addStage = (): void => {
+  const addStage = (onChange: any): void => {
     setStage([...stage, value]);
+    onChange(stage);
   };
 
   return (
-    <>
-      <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}>
-          Add
-        </Button>
-      </div>
-    </>
+    <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>
+        </>
+      )}
+    />
   );
 };