Radio button is not selectable through keyboard

Question

Tabbing is simply escaping this form for some reason. I have added tabIndex as well but doesn't work. Radio inputs are unreachable through tab keys/arrow keys. I can select it using the mouse.

I just wanted to select and focus on the radio button while tabbing. What can be done to enable tabbing on radio buttons as well? It's due to a pseudo-element being added to the radio using :: before. The actual radio button is hidden so it is not accessible. what can i do to select it through the keyboard?

<fieldset
          style={{
            borderStyle: "none",
            marginInline: "unset",
            paddingInline: "unset",
          }}
        >
          <legend
            style={{ float: "left", paddingRight: "50px", width: "400px" }}
          >
            {APP_MESSAGES.GIFT_TITLE}
          </legend>

          <input
            type="radio"
            name="giftwill"
            id="giftTitleTrue"
            style={{
              marginRight: "10px",
              padding: "0px 9px",
            }}
            value="true"
            checked={formInputs.giftwill === "true"}
            onChange={onChange}
          />
          <label htmlFor="giftTitleTrue" style={{ marginRight: "15px" }}>
            Yes
          </label>

          <input
            type="radio"
            name="giftwill"
            id="giftTitleFalse"
            style={{ marginRight: "10px" }}
            value="false"
            checked={formInputs.giftwill === "false"}
            onChange={onChange}
          />
          <label htmlFor="giftTitleFalse" style={{ marginRight: "15px" }}>
            No
          </label>
        </fieldset>
        <fieldset
          style={{
            borderStyle: "none",
            marginInline: "unset",
            paddingInline: "unset",
          }}
        >
          <legend
            style={{ float: "left", paddingRight: "50px", width: "400px" }}
          >
            {APP_MESSAGES.WILL_TITLE}
          </legend>

          <input
            type="radio"
            name="includeinWill"
            id="WillTitleTrue"
            style={{ marginRight: "10px" }}
            value="true"
            checked={formInputs.includeinWill === "true"}
            onChange={onChange}
          />
          <label htmlFor="WillTitleTrue" style={{ marginRight: "15px" }}>
            Yes
          </label>

          <input
            type="radio"
            name="includeinWill"
            id="WillTitleFalse"
            style={{ marginRight: "10px" }}
            value="false"
            checked={formInputs.includeinWill === "false"}
            onChange={onChange}
          />
          <label htmlFor="WillTitleFalse" style={{ marginRight: "15px" }}>
            No
          </label>
        </fieldset>
        <fieldset
          style={{
            borderStyle: "none",
            marginInline: "unset",
            paddingInline: "unset",
          }}
        >
          <legend
            style={{ float: "left", paddingRight: "50px", width: "400px" }}
          >
            {APP_MESSAGES.LEGACY_EVENTS_TITLE}
          </legend>
          <input
            type="radio"
            name="legacyEvents"
            id="legacyEventsTitleTrue"
            style={{ marginRight: "10px" }}
            value="true"
            checked={formInputs.legacyEvents === "true"}
            onChange={onChange}
          />
          <label
            htmlFor="legacyEventsTitleTrue"
            style={{ marginRight: "15px" }}
          >
            Yes
          </label>

          <input
            type="radio"
            name="legacyEvents"
            id="legacyEventsTitleFalse"
            style={{ marginRight: "10px" }}
            value="false"
            checked={formInputs.legacyEvents === "false"}
            onChange={onChange}
          />
          <label
            htmlFor="legacyEventsTitleFalse"
            style={{ marginRight: "15px" }}
          >
            No
          </label>
        </fieldset>