El desplazamiento de desbordamiento no funciona en tailwind css.

Puedo ver esa barra de desplazamiento en el eje x.

Pero cuando uso la rueda del ratón en esa sección, no funciona.

Si sabes, por favor ayúdame..

Este es mi código

<div classname="flex space-x-3 overflow-scroll p-3 -ml-3">
            {cardsData?.map(({ img, title }) => (
              <mediumcard key="{img}" img="{img}" title="{title}"></mediumcard>
            ))}
          </div>

y el código de MediumCard es

const MediumCard = ({ img, title }) => {
  return (
    <div classname="cursor-pointer transform transition hover:scale-105 duration-300 ease-out">
      <div classname="relative h-80 w-80">
        <image src="{img}" layout="fill" classname="rounded-xl"></image>
      </div>
      <h3 classname="text-2xl mt-3">{title}</h3>
    </div>
  );
};