() => {
  const requiredProps = {
    value: undefined,
    name: "name",
    id: "id",
    onChange: () => {},
  };

  return (
    <Stack spacing="md">
      <SearchInput {...requiredProps} />
      <SearchInput icon={Hospital} {...requiredProps} />
      <SearchInput icon={null} {...requiredProps} />
    </Stack>
  );
};

() => {
  const [value, setValue] = React.useState();
  const [isLoading, setIsLoading] = React.useState(false);

  function fetchPatients(filter) {
    const patientNames = [
      { name: "John Campbell" },
      { name: "Jonathan Cash" },
      { name: "John Hawthorne" },
      { name: "John Smith" },
      { name: "John Wilson" },
      { name: "Johnny Wilson" },
    ];
    if (typeof filter === "string") {
      return patientNames.filter((patient) =>
        patient.name.toLowerCase().includes(filter.toLowerCase())
      );
    }
    return patientNames;
  }

  const [list, setList] = React.useState(fetchPatients(""));

  function changeHandler(event) {
    setValue(event.target.value);
    setIsLoading(true);
  }

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      const patients = fetchPatients(value);
      setList(patients);
      setIsLoading(false);
    }, 2000);
    return () => clearTimeout(timeoutId);
  }, [value]);

  return (
    <div style={{ width: "180px" }}>
      <Stack>
        <SearchInput
          value={value}
          isLoading={isLoading}
          onChange={(event) => changeHandler(event)}
          id="search"
          name="search"
        />
        {!isLoading && list.map((item, key) => <p key={key}>{item.name}</p>)}
      </Stack>
    </div>
  );
};