I'm trying to populate Material's UI with a list of countries, like so:

import React from react;

import FormControl from @material-ui/core/FormControl;

import InputLabel from @material-ui/core/InputLabel;

import Select from @material-ui/core/Select;

import MenuItem from @material-ui/core/MenuItem;

import countries from ./data;



const simpleCountrySelect = props => {

  return (

    <>

      <FormControl>

        <InputLabel id=countrySelectLabel>Country</InputLabel>

        <Select labelId=countrySelectLabel id=countrySelect value=''>

          {countries.map((code, name, index) => (

            <MenuItem key={index} value={code}>

              {name}

            </MenuItem>

          ))}

        </Select>

      </FormControl>

    </>

  );

};



export default simpleCountrySelect;

Uncontrolled component for the brevity sake. But I'm getting the following error:

Encountered two children with the same key, `.$.$.$[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Here is sample of the data.js file:

export default [

  { code: AD, name: Andorra },

  { code: AE, name: United Arab Emirates },

  { code: AF, name: Afghanistan },

  { code: AG, name: Antigua and Barbuda }

];

What am I doing wrong here?

EDIT: changed key from code to index, still nothing.