The image component shrinks the width and height to fit everything into the screen width not making it scrollable

As the number of items increases, the image shrinks. How can I make sure the image’s width and height are 500px and make sure it scrolls horizontally?

<ul className="flex flex-row w-screen overflow-x-auto">
  {data.map((item, index) => (
    <li key={index} className="w-500">
      <Image src={data.pic} width={500} height={500} alt="" />
    </li>
  ))}
</ul>

>Solution :

Add shrink-0 to the list items to prevent the items from shrinking. So something like:

<li className="w-500 shrink-0">