How to implement keyboard navigation with custom checkboxes in React

I am trying to create a custom checkbox that removes the checked icon and instead uses the text as the button. However, when I implement this, the keyboard navigation is removed. How can I bring back, or not get rid of keyboard navigation with a custom checkbox?

Note: I am using Formik to handle the validation and submission and Tailwind for the styling.

<div
        key={index}
        className="rounded-md ring-offset-primary ring-offset-2 focus:ring-quad focus:outline-none focus:ring-2 flex gap-2"
      >
        <label htmlFor={player.name} className="cursor-pointer">
          <Field
            type="checkbox"
            onClick={() => handleSetChecked(index)}
            id={player.name}
            name="players"
            value={player.name}

            className="opacity-0 cursor-pointer hidden"
          />
          <span
            className={`block h-full py-1 px-2 rounded-md transition-all border-2 border-quad text-base ${
              checkedStatus[index] ? 'bg-quad text-primary' : 'bg-transparent'
            }`}
          >
            {player.name}
          </span>
        </label>
      </div>