How can we hide default arrow mark in select box?

[priyabsetec1]

We tried below :
ChevronIcon: () => "hidden"

But its not working

        <Select
            value={defaultStatus}
            onChange={handleStatus}
            options={statusList}
            formatOptionLabel={(data) => (
              <li
                className={`block bg-getstartgray hover:bg-lightgray text-white transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${!data.isSelected ? `text-gray bg-black-500` : `bg-blue-100 text-gray-500`}`}
              >
                {data.label}
              </li>
            )}
            primaryColor={"bg-black"}
            classNames={{
              menuButton: () =>
                "bg-transparent hover:bg-lightgray flex justify-between cursor-pointer border border-bountyitemline rounded-xl px-2 py-1 w-full text-lightwhite appearance-none form-selects bg-positonSize bg-no-repeat bg-arrowSize shadow-[none] outline-0",
              menu: "absolute z-10 w-full shadow-lg border border-getstartgray rounded py-1 mt-1.5 text-sm text-gray-700",
              list: "bg-getstartgray bg-opacity-90 rounded-0 hover:bg-getstartgray bg-opacity-90 border border-bountyitemline",
              ChevronIcon: () => "hidden",
              tagItemIcon: "hidden",
              tagItemIconContainer: "hidden",
            }}
          />

Please guide us if any option is there or if we using wrong

[bernardarhia]

You can hide it with tailwind or css.