Todo element to add tripstage.

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 { useFormContext } from 'react-hook-form';
+
+export const TripStage: FC = () => {
+  const [stage, setStage] = useState<string[]>([]);
+  const [value, setValue] = useState<string>('');
+
+  const addStage = (): void => {
+    setStage([...stage, value]);
+  };
+
+  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>
+    </>
+  );
+};