how im using algolia in nextjs with styled components

algolia-hits-nextjs.js

import { connectStateResults } from "react-instantsearch-dom";
import Link from "next/link";
import { StyledTitleLink } from "../components/StyledTitleLink";
import CustomHighlight from "./Highlight";

function Hits({ searchState, searchResults }) {
  const validQuery = searchState.query?.length >= 1; // 1 is the minimum query length

  return (
    <>
      {searchResults?.hits.length === 0 && validQuery && ( // no results found in a valid query
        <p>No results found!</p>
      )}

      {searchResults?.hits.length > 0 && ( // show hits
        <>
          {searchResults.hits.map((hit, index) => (
            <div tabIndex={index} key={hit.objectID}>
              <>
                <Link href={`/projects/${hit.slug}`} passHref>
                  <StyledTitleLink>
                    <CustomHighlight attribute="title" hit={hit} />
                  </StyledTitleLink>
                </Link>
                <CustomHighlight attribute="excerpt" hit={hit} />
              </>
            </div>
          ))}
        </>
      )}
    </>
  );
}

export default connectStateResults(Hits);