<div className="flex items-center overflow-hidden">
        {/* Left Arrow */}
        <button
          onClick={() => scrollDates("left")}
          className="bg-gradient-to-r from-pink-300 to-red-400 text-white px-4 py-2 rounded-l-md flex-shrink-0 h-[150px]"
        >
          &lt;
        </button>

        {/* Date Container */}
        <div
          id="date-scroll-container"
          className="overflow-x-auto scrollbar-hide scroll-smooth max-w-full"
          style={{
            display: "inline-flex",
            whiteSpace: "nowrap",
          }}
        >
          {dates.map((date) => (
            <button
              key={date}
              onClick={() => setSelectedDate(date)}
              className={`rounded-md w-[150px] h-[150px] m-1 flex items-center justify-center text-center ${
                selectedDate === date
                  ? "bg-gradient-to-b from-orange-500 to-yellow-400 text-white"
                  : "bg-yellow-200 text-black"
              }`}
            >
              {date}
            </button>
          ))}
        </div>

        {/* Right Arrow */}
        <button
          onClick={() => scrollDates("right")}
          className="bg-gradient-to-r from-red-400 to-pink-300 text-white px-4 py-2 rounded-r-md flex-shrink-0 h-[150px]"
        >
          &gt;
        </button>
      </div>

It look like in the image and it just stretches infinitely according to the amount of content inside. But it is not giving the dates container an intended horizontal scroll. I dont know where I am going wrong, so please can someone help me? Marked the components too with comment labels so you can figure out what I am talking about