Estoy creando una aplicación de clasificación y, mientras muestro la matriz de números, recibo esta advertencia:

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

Este es mi código:

 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> </> )

}

Tengo curiosidad por saber por qué los accesorios son diferentes de un servidor a otro, ya que mi código no está haciendo nada demasiado elegante...

¡Gracias de antemano!