I am getting this error: Uncaught TypeError: setSearchQuery is not a function in Next.js / Typescript app where I am typing a search query inside search box. I created a generic search function in TypeScript and all my code works well expect I am getting this tiny error... Any ideas what I am doing wrong?

TopPanel.tsx

  export interface ISearchInputProps {
  setSearchQuery: (searchQuery: string) => void; 

  export const TopPanel = (props: ISearchInputProps) => {
    const { setSearchQuery } = props;
    return (
        <div>
            <input
              type="text"
              placeholder="Search Assets..."
              onChange={(event) => 
                setSearchQuery(event.target.value)}
            />
          </div>
        );
       }

AssetsList.tsx

 import generiSearch from 'src/utils/genericSearch' 

 const [query] = useState<string>('');````

 const filteredData = reserves
    .filter((res) => genericSearch(res, ['symbol'], query, false))
    .map((reserve) => ({
      ...rest of the code...
    }));

    return (
     ... 
   );
  }

genericSearch.ts

export default function genericSearch<T>(
  object: T,
  properties: Array<keyof T>,
  query: string,
  shouldBeCaseSensitive: boolean
): boolean {
  if (query === '') {
    return true;
  }

  const expression = properties.map((property) => {
    const value = object[property];

    if (typeof value === 'string' || typeof value === 'number') {
      if (shouldBeCaseSensitive) {
        return value.toString().includes(query);
      } else {
        return value.toString().toLowerCase().includes(query.toLowerCase());
      }
    }

    return false;
  });
  return expression.some((expression) => expression);
}