Sp-picker selects only on second click

Hi UXP developer, When I click on with wrap inside , first item not selected on once, need to click twice then it select, it happened with only first item any other second onwards it is working fine. Below is my code. Anyone facing this issue?

<WC onChange={(event) => handler(event.target.value)}>
    <sp-picker size="l">
        <sp-menu>
            {options.map(element => (
                <sp-menu-item key={element} value={element}>
                    {element}
                </sp-menu-item>
            ))}
        </sp-menu>
    </sp-picker>
</WC>

For me, the following code works fine (first option directly clickeable):

<sp-picker id="myId" size="M">
  <sp-menu slot="options">
    <sp-menu-item value="never">never ever</sp-menu-item>
    <sp-menu-item value="special">maybe somtimes</sp-menu-item>
    <sp-menu-item value="always">I like it</sp-menu-item>
  </sp-menu>
</sp-picker>

I have an additional slot attribute in sp-menu, maybe that makes a difference?