I have this component that renders <CardsList/> which is a <ul> and inside it I’m rendering many of <li> called <BeanCard/>:

import { getBeans } from "@/API/apiBeans";
import { getFaves } from "@/API/apiGlobal";
import BeanCard from "./BeanCard";
import CardsList from "../Card/CardsList";

export default async function AllBeans({ filter, sort }) {
  const beans = await getBeans(filter, sort);
  const faves = await getFaves("Bean");

  return (
    <CardsList>
      {beans.map((bean) => (
        <BeanCard key={bean._id} bean={bean} liked={faves.includes(bean._id)} />
      ))}
    </CardsList>
  );
}

each has a heart button to let the users mark their favourites Beans:

<button onClick={handleFaves}>
      <HeartIcon className={icon stroke-red-500 hover:fill-red-500 ${liked && "fill-red-500"}}/>
</button>

as the question’s title said I want to show an immediate change in the UI in order to reflect the users’ actions whenever they click on any card to favourite/unfavourite it.
I don’t prefer using revalidatePath() because it makes the page becomes suddenly white then all the components appear again.
useTransition() causes errors with mongoose so I gave it up.
reloading or re-validating the whole page not good for performance. I’m considering the useState() as a final solution but wanted to ask here before going with that.