New component to search senior (see #12). Enhance responsiveness and solve #10 and #11

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

+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { getSeniorList } from 'api/getSeniorList';
+import { ResponseProps } from 'api/ResponseProps';
+import { Control, Controller } from 'react-hook-form';
+import { ReservationProps } from './ReservationProps';
+
+type SeniorSearchProps = {
+  control: Control<ReservationProps>;
+};
+
+export const SeniorSearch: FC<SeniorSearchProps> = ({
+  control,
+}: SeniorSearchProps) => {
+  const [value, setValue] = useState<ResponseProps | null>(null);
+  const [seniors, setSeniors] = useState<ResponseProps[]>([]);
+  const [query, setQuery] = useState<string>('');
+
+  // FIX: Input closing when the data is changed.
+  // The issue is caused by the stopped re-rendering of react hook form. Consider
+  // attaching the value manually or to isolate this component.
+  const handleChange = (newValue: string): void => {
+    const MIN_SEARCH_LENGTH = 4;
+    if (newValue.length >= MIN_SEARCH_LENGTH && value == null) {
+      getSeniorList(newValue).then((list) => {
+        if (list.length !== 0) {
+          setSeniors(list);
+        } else {
+          setSeniors([]);
+        }
+      });
+    }
+  };
+
+  return (
+    <Controller
+      control={control}
+      name="senior"
+      as={({ onChange }) => (
+        <Autocomplete
+          value={value}
+          id="senior-searcher"
+          onInputChange={(_, newValue) => handleChange(newValue)}
+          onChange={(_, val) => {
+            onChange(val?.id);
+            setValue(val);
+          }}
+          options={seniors}
+          getOptionSelected={(option, val) => option.id === val.id}
+          getOptionLabel={(option) => option.user.lastName}
+          renderOption={(option) => (
+            <>
+              {option.user.firstName} {option.user.lastName}{' '}
+              {option.user.username} {option.memberCardNumber}
+            </>
+          )}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label="Search a senior"
+              variant="outlined"
+              InputProps={{
+                ...params.InputProps,
+              }}
+            />
+          )}
+        />
+      )}
+    />
+  );
+};