[ResourceItem] shortcutActions on hover with select placing on incorrect element

[posth]

Issue summary

When using a selectable <ResourceList /> with <ResourceItem />'s that have shortCutActions, the Shortcut action button gets rendered on the incorrect element.

This causes a strange behavior when hovering between multiple selected <ResourceItem /> elements with shortcut actions.

Expected behavior

When selecting multiple resources that have shortcut actions, it only renders the button on the current element it is hovering on.

Actual behavior

Currently it's hovering on the last checked item as well as the current item.

Playground example

Playground to reproduce the problem

Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';
import {Page, ResourceList, ResourceItem} from '../src';

export function Playground() {
  const customers = [
    {
      id: '1',
      name: 'Zoey',
    },
    {
      id: '2',
      name: 'Bill',
    },
    {
      id: '3',
      name: 'Francis',
    },
    {
      id: '4',
      name: 'Louis',
    },
  ];
  const [nextSelectedItems, setNextSelectedItems] = useState([]);

  return (
    <Page title="Playground">
      <ResourceList
        items={customers}
        selectable
        selectedItems={nextSelectedItems.map(({id}) => id)}
        onSelectionChange={(selectedItems) => {
          setNextSelectedItems(
            customers.filter(({id}) => selectedItems.includes(id)),
          );
        }}
        renderItem={({id, name}) => (
          <ResourceItem
            id={id}
            shortcutActions={[{content: 'Shortcut action'}]}
            onClick={() => null}
          >
            <h1>{name}</h1>
          </ResourceItem>
        )}
      />
    </Page>
  );
}