title: How can I render an array of components in react without them unmounting?
body: <p>I have an array of React components that receive props from a map function, however the issue is that the components are mounted and unmounted on any state update. This is not an issue with array keys.
  Please see codesandbox link.</p>
  <pre class="lang-js prettyprint-override"><code>const example = () =&gt; {
    const components = [
      (props: any) =&gt; (
        &lt;LandingFirstStep
          eventImage={eventImage}
          safeAreaPadding={safeAreaPadding}
          isActive={props.isActive}
          onClick={progressToNextIndex}
        /&gt;
      ),
      (props: any) =&gt; (
        &lt;CameraOnboarding
          safeAreaPadding={safeAreaPadding}
          circleSize={circleSize}
          isActive={props.isActive}
          onNextClick={progressToNextIndex}
        /&gt;
      ),
    ];
  
    return (
      &lt;div&gt;
        {components.map((Comp, index) =&gt; {
          const isActive = index === currentIndex;
          return &lt;Comp key={`component-key-${index}`} isActive={isActive} /&gt;;
        })}
     &lt;/div&gt;
    )
  }
  </code></pre>
  <p>If I render them outside of the <code>component.map</code> like so the follow, the component persists on any state change.</p>
  <pre><code>&lt;Comp1 isActive={x === y}
  &lt;Comp2 isActive={x === y}
  </code></pre>
  <p>Would love to know what I'm doing wrong here as I am baffled.</p>
  <p>Please take a look at this <a href="https://codesandbox.io/s/damp-moon-9mswb?file=/src/App.js:468-526" rel="nofollow noreferrer">Codesandbox</a>.</p>
  <p>I believe I am doing something wrong when declaring the array of functions that return components, as you can see, ComponentOne is re-rendered when the button is pressed, but component two is not.</p>