Tooltip for each option of dropdown

Question

I want to show the tooltip for each option of using react-tooltip, I have tried below code which is working fine to show tooltip on mouseover, but on keydown and keyup arrow it not works because the focus never come to inner child div, which I have created as below... Here, I updating options with tooltip div

updatedOptions = updatedOptions.map((option) => {
    return {
      value: option.value,
      label: (
        <>
          <ReactTooltip
            role="tooltip"
            className="cb-select-tooltip"
            type="info"
            place="right"
            effect="solid"
            id={option?.value}
          />
          <div
            data-for={option?.value}
            data-tip={option?.tooltipContent}
            data-event="mouseover focus"
            data-event-off="mouseout blur"
            aria-label="option"
            className="select-option"
            ref={this.selectOption}
            role="button"
            tabIndex="0"
          >
            {option?.label}
          </div>
        </>
      ),
    };
  });

There is always a parent div creted, `

<div role="listbox" id="react-select-2-menulist">
  
  <div class="select__option css-3dmylm-option" id="react-select-2-option-0" tabindex="-1">
    <div class="__react_component_tooltip place-right type-dark " id="" role="tooltip" data-id="tooltip"></div>
    <div
      data-for=""
      data-event="mouseover focus keydown"
      data-event-off="mouseout blur keyup"
      aria-label="option"
      role="button"
      tabindex="0"
      class="select-option"
    ></div>
  </div>
  <div class=select__option css-3dmylm-option" id="react-select-2-option-1" tabindex="-1">
    <div
      class="__react_component_tooltip place-right type-info select-tooltip"
      id="<"
      role="tooltip"
      data-id="tooltip"
      style="left: 270px; top: 174px;"
    >
      Less than
    </div>
    <div
      data-for="<"
      data-tip="Less than"
      data-event="mouseover focus keydown"
      data-event-off="mouseout blur keyup"
      aria-label="option"
      role="button"
      tabindex="0"
      class="select-option"
    >
      &lt;
    </div>
  </div>

`

my question is, can we have control on that outer div HTML, while modifying option. Or please suggest if I'm following wrong approach.