title: Two children with the same key … React (ionic), although keys are unique
body: <p>I am using two map functions in two different React components with two different keys.
  But I still get that annoying error.
  Can somebody please help me</p>
  <p>Error message: index.js:1 Warning: Encountered two children with the same key, .$. 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.</p>
  <p>My two map functions</p>
  <pre><code>&lt;Stepper activeStep={activeStep} alternativeLabel className=&quot;Stepper&quot; &gt;
    {stepss.map((label) =&gt; (
      &lt;Step key={label}&gt;
        &lt;StepLabel&gt;{label}&lt;/StepLabel&gt;
      &lt;/Step&gt;
    ))}
  &lt;/Stepper&gt;
  
  
  &lt;Stepper activeStep={activeStep} alternativeLabel className=&quot;Stepper&quot; &gt;
    {stepss.map((labell) =&gt; (
      &lt;Step key={labell}&gt;
        &lt;StepLabel&gt;{labell}&lt;/StepLabel&gt;
      &lt;/Step&gt;
    ))}
  &lt;/Stepper&gt;
  </code></pre>
  <p>initializing steeps (thid component)</p>
  <pre><code>const steps = [
      { id: 'Häuser' },
      { id: 'Fläche' },
      { id: 'Wohnfläche' },
      { id: 'Postleizahl' },
      { id: 'Submit' },
      { id: 'design' }
  ]
  
  
  
  const useStyles = makeStyles((theme) =&gt; ({
      root: {
          width: '100%',
      },
      backButton: {
          marginRight: theme.spacing(1),
      },
      instructions: {
          marginTop: theme.spacing(1),
          marginBottom: theme.spacing(1),
      },
  }));
  
  
  function getSteps() {
      return ['', '', '', '', ''];
  }
  
  function getStepContent(stepIndex) {
      switch (stepIndex) {
          case 0:
              return 'Select campaign settings...';
          case 1:
              return 'What is an ad group anyways?';
          case 2:
              return 'This is the bit I really care about!';
          default:
              return 'Unknown stepIndex';
      }
  }
  
  
  
  
  export const MultiStepFrom = () =&gt; {
  
      const classes = useStyles();
      const [activeStep, setActiveStep] = React.useState(0);
      const stepss = getSteps();
  
  
      const [formData, setForm] = useState(defualtData)
      const { step, navigation } = useStep({
          steps,
          initialStep: 0,
      })
  
      const props = { formData, setForm, navigation, stepss, activeStep, setActiveStep, classes }
  
      switch (step.id) {.....
  </code></pre>