Continue to analyze #12.

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 { InsertReservationProps } from './InsertReservationProps';
-
-type SeniorSearchProps = {
-  control: Control<InsertReservationProps>;
-};
-
-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,
-              }}
-            />
-          )}
-        />
-      )}
-    />
-  );
-};