Tooltip for each option of dropdown - reactjs

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"
>
<
</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.