How can I create React Carousel left and right functionalities?

I have written this code using Tailwind CSS.
I am trying to build something similar to the horizontal container from unsplash.com

Suppose the category array has about 15 strings contained.

<ul className="flex items-center overflow-scroll whitespace-nowrap">
      <button onClick={(e) => console.log(e)}>
        <Chevron_left className="mr-2 w-3" />
      </button>
      {categories.map((category, i) => (
        <li
          key={i}
          className="rounded-full border border-gray-300 px-2 hover:bg-slate-100"
        >
          <button>{category}</button>
        </li>
      ))}
      <button>
        <Chevron_right className="ml-2 w-3" />
      </button>
    </ul>