Why I get two hydration errors in that case?

Question

File where I get error

/* eslint-disable @next/next/no-img-element */
import { ProductType } from '@/typed'
import Image from 'next/image'
import React, { useState } from 'react'
import { StarIcon } from '@heroicons/react/24/solid'
import Currency from 'react-currency-formatter'

type Props = {
  product: ProductType
}

const Product = ({ product }: Props) => {
  const [rate] = useState(Math.floor(Math.random() * Math.floor(Math.random() * 5) + 2))
  const [prime] = useState(Math.random() < 0.5)

  return (
    <div className="relative flex flex-col bg-white p-10">
      <div className="absolute top-2 right-2">
        <p className="text-xs text-gray-500 italic">{product.category}</p>
      </div>

      <img src={product.image} alt="icon" className="mx-auto object-contain w-[200px] h-[200px]" />

      <p className="text-xl my-3">{product.title}</p>

      <div className="flex">
        {Array(rate)
          .fill(null)
          .map((_, i) => (
            <StarIcon key={i} className="h-5 w-5 text-yellow-500" />
          ))}
      </div>

      <p className="text-xs line-clamp-2 my-2">{product.description}</p>

      {prime && (
        <div className="flex items-center space-x-2">
          <img src="https://links.papareact.com/fdw" alt="prime" className="h-10" />
          <p className="text-sm text-gray-500">FREE Next-day Delivery</p>
        </div>
      )}

      <div className="mb-5 font-bold text-lg flex-grow">
        <Currency quantity={product.price} currency="GBP" />
      </div>

      <button className="button">Add to Basket</button>
    </div>
  )
}

export default Product

First error Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack svg StarIcon div div Product div ProductFeed main div Home App

Second error Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack svg StarIcon div div Product div ProductFeed main div Home App

I don't know whe these errors are here, I think that all should be good here.