Предупреждение: у каждого ребенка в списке должна быть уникальная «ключевая» опора. при распространении реквизита и составлении нескольких компонентов Mui

Question

Я немного озадачен этим, я собираю несколько компонентов Material ui вместе, чтобы имитировать c шаблон в TextField для поля выбора.

Когда я создаю историю в сборнике рассказов, это нормально. но когда это страница, отображаемая сервером, она ведет себя правильно, но я получаю предупреждение об уникальном ключе

export const SelectField: React.FunctionComponent<SelectFieldProps> = ({
  label,
  SelectProps,
  children,
  disabled,
  helperText,
  error,
  className,
  name,
  id,
  value,
  onChange,
  onBlur,
  fullWidth,
}) => {
  const labelClasses = useLabelStyles();
  const helperTextClasses = useHelperStyles();
  const formControlClasses = useFormControlStyles({ fullWidth });
  // TODO investivate className server client mismatch with props in dev mode
  const width = fullWidth ? '100%' : 'auto';

  const inputLabel = React.useRef<HTMLLabelElement>(null);
  const [labelWidth, setLabelWidth] = React.useState(0);

  React.useEffect(() => {
    setLabelWidth(inputLabel?.current?.offsetWidth ?? 0);
  }, []);

  return (
    <FormControl
      classes={formControlClasses}
      style={{ width }}
      className={className}
      variant="filled"
      error={error}
      disabled={disabled}
    >
      {label && (
        <InputLabel classes={labelClasses} htmlFor={id ? id : SelectProps?.inputProps?.id}>
          {label}
        </InputLabel>
      )}
      <Select
        {...SelectProps}
        labelWidth={labelWidth}
        label={label}
        disabled={disabled ?? SelectProps?.disabled}
        name={name ?? SelectProps?.inputProps?.name}
        id={id ?? SelectProps?.inputProps?.id}
        value={value ?? SelectProps?.value}
        onChange={onChange ?? SelectProps?.onChange}
        onBlur={onBlur ?? SelectProps?.onBlur}
      >
        {children}
      </Select>
      {helperText && <FormHelperText classes={helperTextClasses}>{helperText}</FormHelperText>}
    </FormControl>
  );
};

и мое использование его примерно:

<Grid item xs={12} sm={sm}>
                <SelectField
                  fullWidth
                  name="isoCountryCode"
                  id="isoCountryCode"
                  label="Country"
                  SelectProps={{
                    inputProps: {
                      'data-testid': 'country-code',
                      autoComplete: 'country',
                    },
                  }}
                >
                  <option value="" />
                  {IsoCountryCodes.map(({ value, key, label }) => (
                    <option value={value} key={key}>
                      {label}
                    </option>
                  ))}
                </SelectField>
              </Grid>

и да, значения параметров уникальный. Я также получил ошибку, когда вынул эту часть:)

есть идеи?

вот ссылка на проблему, которая была закрыта ботом поддержки: https://github.com/mui-org/material-ui/issues/20104