fix(menu): pass key to <MenuDivider /> (uber#5218)

When `{ divider: true }` was passed as an item to the menu component
would not pass the key prop causing the react warning for missing keys.

With these changes the current scope's iterator `itemIndex` is passed as
it is passed to the `<Option />` component.

Co-authored-by: Chase Starr <[email protected]>

src/menu/__tests__/menu.test.tsx

@@ -46,4 +46,19 @@ describe('Menu Stateless Component', () => {
     const options = getAllByTestId(container, 'option');
     expect(options.length).toBe(2);
   });
+
+  it('renders dividers without react key warning', () => {
+    const original = console.error;
+    console.error = jest.fn();
+    const itemsWithDivider = [{ label: 'item1' }, { divider: true }, { label: 'item2' }];
+    // @ts-expect-error todo(flow->ts)
+    render(<Menu {...getSharedProps()} items={itemsWithDivider} />);
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining('Each child in a list should have a unique "key" prop.'),
+      expect.anything(),
+      expect.anything(),
+      expect.anything()
+    );
+    console.error = original;
+  });
 });

src/menu/menu.tsx

@@ -77,7 +77,7 @@ export default function Menu(props: StatelessMenuProps) {
         const { getRequiredItemProps = (item, index) => ({} as RenderItemProps) } = props;
 
         if (item.divider === true) {
-          return <MenuDivider {...menuDividerProps} />;
+          return <MenuDivider key={itemIndex} {...menuDividerProps} />;
         }
 
         const {