hydration errors happen when server rendering your page/component has a different result compared to rendering it on the client - what does the code look like for this component?

@American Chinchilla show me your codebase, ideally inside the <p> tag

i belive this is the causer

"use client";

import Button from "@/shared/buttons/Button";
import useSheetStore from "@/store/sheet";
import { cn } from "@/utils/utils";

type Props = {
  children: React.ReactNode;
  className?: string;
  title: string;
  amount: number;
  disabled?: boolean;
  seeAllContent: React.ReactNode;
};

const AcceptTile = ({
  children,
  className,
  title,
  amount,
  disabled,
  seeAllContent,
}: Props) => {
  const { showSheet } = useSheetStore();

  return (
    <div
      className={cn(
        "flex flex-col items-start gap-3 p-4 rounded-8 border border-gray-500 bg-gray-100",
        className
      )}
    >
      <div className="flex items-center justify-between w-full">
        <div className="flex items-center gap-2">
          <p className="h5-700 text-gray-900">{title}</p>
          <p className="body2-400 text-gray-700">({amount})</p>
        </div>
        <Button
          variant="link"
          disabled={disabled}
          onClick={() => showSheet(seeAllContent)}
        >
          Zobacz wszystkie
        </Button>
      </div>
      {children}
    </div>
  );
};

export default AcceptTile;

<p className="body2-400 text-gray-700">({amount})</p>

this is what amount is

"use client";

import { countResults, getUnacceptedUsers } from "@/utils/api";
import { use } from "react";
import AcceptTile from "../AcceptTile";
import AcceptRegistrationContent from "./AcceptRegistrationContent";
import AcceptRegistrationSheet from "./AcceptRegistrationSheet";

export const dynamic = "force-dynamic";

const promiseGetUnacceptedUsers = getUnacceptedUsers();
const promiseGetUnnacceptedUsersCount = countResults(
  "users",
  "confirmed=false&blocked=false"
);

const AcceptRegistration = () => {
  const { data: unacceptedUsers } = use(promiseGetUnacceptedUsers);
  const amount = use(promiseGetUnnacceptedUsersCount);

  return (
    <AcceptTile
      title="Akceptacja rejestracji"
      amount={amount}
      disabled={!amount}
      seeAllContent={<AcceptRegistrationSheet users={unacceptedUsers} />}
      className="w-3/5"
    >
      <AcceptRegistrationContent amount={amount} users={unacceptedUsers} />
    </AcceptTile>
  );
};

export default AcceptRegistration;

i added the dynamic export but doesnt seem to work as i want it to

basically the AcceptRegistrationContent renders a list of users which can be deleted and i want the list to update with updated list

@American Chinchilla I need to see how you caculate amount.
a simple approach to fix this one is to dynamically import the component with ssr: false

if you think SEO is not that important for that component

thus the amount value stored in array format?

Where do you need to declare ssr: false? I am having similiar issue

(I have 0 concern about SEO in my instance)

see ComponentC