hi,
i'm trying to get a basket (list of ingredient) using my client localstorage
but each time i combined localstorage and server cache, i got an error:

could you help me understand why?

// CLIENT TOP COMPONENT
"use client";
import { PageLayoutComponent } from "@/_components/layout/page-layout";
import React, { useState } from "react";
import BasketContent from "./_components/basket-content";

const BasketPage = () => {
  const [recipes, setRecipes] = useState<string[]>([]);

  React.useEffect(() => {
    const basket: string[] = JSON.parse(
      localStorage.getItem("basket") || "[]"
    );

    setRecipes(basket);
  }, []);

  return (
    <PageLayoutComponent title="Liste de course">
      {recipes.length && <BasketContent basket={recipes} />}
    </PageLayoutComponent>
  );
};

export default BasketPage;

// SUB SERVER COMPONENT
import RecipeCache from "@/lib/recipe/cache";

export default async function BasketContent({
  basket,
}: {
  basket: string[];
}) {
  const cachedData = await RecipeCache.getBasket(basket);
  return (
    cachedData.length &&
    cachedData.map((l) => <>{l.ingredient}</>)
  );
}

// CACHE FUNCTION
const getBasket = cache(async (basket: string[]): Promise<IngredientLine[]> => {
  return new Promise(async (resolve, reject) => {
    const response = await service.getBasket({ basket });

    if (!response.data) return reject(response.error);

    return resolve(response.data);
  });
});

// SERVICE LAYER (ORM)
const getBasket = async ({
  basket,
}: {
  basket: string[];
}): Promise<ServiceResponse<IngredientLine[]>> => {
  const recipes = await RecipeModel.getManyRecipeByIds(basket); // ORM request
  return { data: recipes.flatMap(({ ingredientLines }) => ingredientLines) };
 };
    setRecipes(currentBasket);
  }, []);

  return (
    <PageLayoutComponent title="Liste de course">
      {recipes.length && <BasketContent currentBasket={recipes} />}
    </PageLayoutComponent>
  );
};

export default BasketPage;

Cheers !