algoliaのカスタムサーチボックス

CustomSearchBox.tsx

import React from "react";
import { useSearchBox } from "react-instantsearch-hooks-web";

export function CustomSearchBox({ props }: { props: any }) {
  const { query, refine } = useSearchBox(props);

  return (
    <>
      <input
        type="text"
        value={query}
        placeholder="Common name or scientific name"
        onChange={(e) => refine(e.currentTarget.value)}
      />
    </>
  );
}