Cannot click on a hidden element, which becomes visible only after hovering over the parent element

There are 10 items. I need to click on the hidden element (item-icon) in the item_9. The hidden element appear after hovering on him. I have the same situation and the same code operate as expected. But in this situation code operate as unexpected and get Error in the console. How can I click on the item-icon element in the item_9 element?

html:

<div class="item">
 <div class="w">item_1</div>
  <div class="d">
    <div style="display:none" class="item-icon" role="button" tabindex="-1">
      button1
    </div>
    <div style="display:none" class="item-icon">
      button2
    </div>
  </div>
</div>
<div class="item">
  <div class="w">item_2</div>
  <div class="d">...</div>
</div>
      ...

<div class=""><div class="item">
  <div class="w">item_10</div>
  <div class="d">...</div>
</div></div>

js:

let findItems = await driver.findElements(By.className("item"));
let items = findItems.map(async elem => await elem.getText());
let allItems = await Promise.all(items);
await driver.findElement(By.xpath(`//div[@class='item'][9]//div[@class='item-icon'][2]`)).click();

Console Error:

{ NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//div[@class='item'][9]//div[@class='item-icon'][2]"}