I'm building a sorting app and while displaying the array of numbers I get this warning:

Warning: Prop `style` did not match. Server: "height:{x}px" Client: "height:{y}px"

This is my code:

const SortingApp: React.FC = () => {


const fillWithRandom = (quantity: number):number[] => { // array of unique random numbers
    const results: number[] = [];
    while(results.length < quantity){
        let candidateInt = Math.floor(Math.random() * quantity) + 1
        if(results.indexOf(candidateInt) === -1) results.push(candidateInt)
    };

    return results }


const [data, setData] = useState(fillWithRandom(300))


return (
    <>
    <Layout>
    <Navbar />
    <div className="mx-5 flex gap-x-0.5 place-content-center">
        {data.map(x => {
            return (
                <div key={x} className={`w-1 bg-black`} style={{ height: `${x}px` }} />
            )
        })}
    </div>
    </Layout>
    </>
)

}

I'm curious to know why the props are different from server to client, since my code is not doing anything too fancy...

Thanks beforehand!