Do you see an error with this mutation/query code?

  const mutation = useMutation({
    mutationFn: (serie: SerieType) => {
      return fetch(`http://localhost:3000/series/${serie.id}/fav`, {
        method: "POST",
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["series"] });
    },
  });
  const clickFav = (e: any, serie: SerieType) => {
    mutation.mutate(serie);
  };

 const { isLoading, error, data, isSuccess } = useQuery<SerieType[]>({
    queryKey: ["series"],
    queryFn: () => {
      console.log("fetchSeries");
      return fetch("http://localhost:3000/series").then((res) => res.json());
    },
  });

  const [selectdedSerie, setSelectdedSerie] = useState<SerieType | null>(null);

  const { data: serie, isSuccess: isSerieSuccess } = useQuery<SerieType>({
    queryKey: ["series", selectdedSerie?.id],
    queryFn: () => {
      return fetch(`http://localhost:3000/series/${selectdedSerie?.id}`).then(
        (res) => res.json()
      );
    },
    enabled: !!selectdedSerie,
  });
  const clickSerie = (serie: SerieType) => {
    setSelectdedSerie(serie);
  };
  if (!isSuccess) {
    return <p>pas de success</p>;
  }
  console.log(serie?.isFav); // works but the return doesn't have the right value
  return (
    <div className="App min-h-screen bg-slate-800 text-white ">
      <div className="grid grid-cols-5 gap-4">
        {data.map((serie) => (
          <Serie
            onClick={() => clickSerie(serie)}
            key={serie.id}
            serie={serie}
          ></Serie>
        ))}
      </div>
      {isSerieSuccess && <Serie serie={serie}></Serie>}
    </div>
  );