Как убрать стрелки в типе ввода «число» внутри ввода?

Я хотел бы удалить стрелки, когда ввод сфокусирован, но я не могу использовать файл CSS. Я должен сделать это на моем компоненте.

Как я могу этого добиться? Возможно ли это с помощью TailwindCSS?

Детская площадка Tailwind

const InputCounter = ({ id, label, value }: NumericInputProps) => {
  const [count, setCount] = useState(value ?? 0);

  return (
    <div className = "hk-flex hk-flex-col hk-gap-2">
      <label htmlFor = {id} className = "hk-text-sm hk-font-bold hk-text-neutral-700">
        {label}
      </label>

      <div>
        <button
          type = "button"
          className = "hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-r focus:hk-outline-none"
          onClick = {() => setCount(count - 1)}
        >
          <IconLess width = {16} height = {16} />
        </button>

        <input
          id = {id}
          type = "number"
          value = {count}
          className = "hk-h-10 hk-w-16 hk-text-center hk-text-base hk-border-none hk-rounded focus:hk-outline-none hk-appearance-none"
        />

        <button
          type = "button"
          className = "hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-l focus:hk-outline-none"
          onClick = {() => setCount(count + 1)}
        >
          <IconPlus width = {16} height = {16} />
        </button>
      </div>
    </div>
  );
};