How can i use a random number without getting a hydration error?

const DeveloperPage = ({ users, pages }: Props) => {
  return (

    <div className="mx-auto px-3 md:px-5 pt-20 pb-11 max-w-screen-xl flex flex-col gap-10">

      {/* SEARCH BAR */}
      <SearchBar />

      {/* USERS */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-8 headline-color">
        {users.map((user) => (
          <UserComponent key={user.id} user={user} randomNumber={Math.floor(Math.random() * (100 - 3) + 3)} /> //HYDRATION ERROR FROM THE RANDOM NUMBER
        ))}
      </div>

      <div className="text-white flex items-center justify-center">
        {Array.from(Array(pages).keys()).map((page) => (
          <Link href={`/udviklere?page=${page + 1}`} key={page}>
              {page + 1}
          </Link>
        ))}
      </div>
    </div>
  )
};

const DeveloperPage = ({ users, pages }: Props) => {
  return (

    <div className="mx-auto px-3 md:px-5 pt-20 pb-11 max-w-screen-xl flex flex-col gap-10">

      {/* SEARCH BAR */}
      <SearchBar />

      {/* USERS */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-8 headline-color">
        {users.map((user) => (
          <UserComponent key={user.id} user={user} randomNumber={Math.floor(Math.random() * (100 - 3) + 3)} /> //HYDRATION ERROR FROM THE RANDOM NUMBER
        ))}
      </div>

      <div className="text-white flex items-center justify-center">
        {Array.from(Array(pages).keys()).map((page) => (
          <Link href={`/udviklere?page=${page + 1}`} key={page}>
              {page + 1}
          </Link>
        ))}
      </div>
    </div>
  )
};