Estoy usando Nextjs y hay una barra lateral en la que intento obtener 5 publicaciones aleatorias de una variedad de objetos. La función definida funciona bien y muestra 5 publicaciones, pero recibo un error de hidratación que muestra que Prop alt no coincide. Cuando traté de mostrarlo en la consola, el valor alt es diferente.

 import Link from 'next/link'; import Image from 'next/image'; import { BlogData } from '../data/blogdata'; function getMultipleRandom() { const shuffled = [...BlogData].sort(() => 0.5 - Math.random()); return shuffled.slice(0, 5); } const Sidebar = () => { return ( <> <h2 className='font-roboto text-3xl font-semibold pb-10'>Featured Posts</h2> { getMultipleRandom().map((val) => { return ( <div key={val._id} className='flex flex-col pt-5'> <div className='w-56 pr-5'><Image src={val.featuredImage} alt={val.alt} width={1200} height={800} className=' rounded-3xl' /></div> <Link href={`/blog/${val.slug}`}><a><h3 className='text-sm font-poppins font-medium hover:text-[#5836ed] transition-all duration-300'>{val.title}</h3></a></Link> </div> ); }) } </> ) } export default Sidebar;