List with 'action' property generates a warning

Expected Behavior

      <List
        primaryKey="name"
        data={[
          { name: 'Alan', percent: 20 },
          { name: 'Bryan', percent: 30 },
          { name: 'Chris', percent: 40 },
          { name: 'Eric', percent: 80 },
        ]}
        action={d => <Menu icon={<More />} hoverIndicator items={[{ label: "one" }]} />}
      />

No warning should be emitted.

Actual Behavior

There’s a warning:

index.js:1 Warning: Each child in a list should have a unique “key” prop.

Check the render method of InfiniteScroll. See https://fb.me/react-warning-keys for more information. in Box (created by InfiniteScroll) in InfiniteScroll (created by List) in ul (created by List__StyledList) in List__StyledList (created by List) in Keyboard (created by List) in List (created by List) in List (created by FocusableComponent) in FocusableComponent (created by List) in List (created by WithTheme(List)) in WithTheme(List) (at pages/index.js:7) in div (created by StyledGrommet) in StyledGrommet (created by Grommet) in Grommet (at pages/index.js:6) in Unknown (created by App) in App in Container (created by AppContainer) in AppContainer

If the ‘action’ property is removed, there is no warning.

Steps to Reproduce

See sandbox here: https://codesandbox.io/s/distracted-taussig-hdvjb

Your Environment

• Grommet version: 2.11.2
• Browser Name and version: Chrome v80
• Operating System and version (desktop or mobile): Win10

[IanKBovard]

Changing action to this fixes the issue.

action={(d, index) => <Menu key={index} icon={<More />} hoverIndicator items={[{ label: "one" }]} />}

Menu needs a unique key prop because I’m assume list is mapping.

[IanKBovard]

My apologies, got caught up in a few projects. Giving this issue my full attention now.