So I have a client component that has a useState hook, and inside of that component there are server components (<BeatmapCard />) that are rendered by mapping through an array. Whenever the page first loads, it works fine, and I can tell the server components are working because I see the console.log in the terminal. However, once I type in the <SearchBar />, which changes the state of searchTerm, the page crashes and I get an error that await can't be used in a client component, which is coming from the BeatmapCard server component. I have a feeling this is just a logical error, but it would be nice to know what I'm doing wrong here?

Relevant code:

"use client";

import React, { useState } from "react";
import BoxContainer from "./BoxContainer";
import SearchBar from "./SearchBar";
import BeatmapCard from "./BeatmapCard";
import BeatmapListContainer from "./BeatmapListContainer";

export default function BeatmapSearchBox() {
  const [searchTerm, setSearchTerm] = useState("");

  const handleSearchChange = (newSearchTerm) => {
    setSearchTerm(newSearchTerm);
  };

  const ids = [123, 124, 125];

  return (
    <div>
      <BoxContainer>
        <div>
          <SearchBar onSearchChange={handleSearchChange} />
          <p>Search Term: {searchTerm}</p>
          <BeatmapListContainer>
            {ids.map((beatmap) => {
              return <BeatmapCard key={beatmap} id={beatmap} />;
            })}
          </BeatmapListContainer>
        </div>
      </BoxContainer>
    </div>
  );
}