I am trying to create choose an area code.

The HTML looks like this:

<div class="van-picker-column">
  <ul class="van-picker-column__wrapper">
    <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
      <div class="van-ellipsis">1</div>
    </li>
    <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
       <div class="van-ellipsis">1242</div>
    </li>
    ...
    <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
       <div class="van-ellipsis">1264</div>
   </li>
  </ul>
</div>

Items in the ul are area codes and in mobile view, thus, it can only show the first 5 items, then I have to scroll over the list to select my intended value. The UI is shown below.

I tried:

• set focus to element using the //ul[@class='van-picker-column__wrapper']/li[n] where n is the element's index on the list. It is not working.
• Mouse Over on the element, I am encountering an error. It says the target is out of bounds.
• Using Select From List by Label or Value is also not working. I think because it only works on <li value="val">label</li> with values, not <li><div></div><li> format
• Using Press Keys is also not working. I can't select an area code even if I use keyboard keys in the website under test.

Is there a way to select an item inside an unordered list in the robot framework?