title: Warning: Each child in a list should have a unique "key" prop but i have key props
body: <p>the provided answers didn't give me a hint on whats the problem in my case here. So im getting the following error in console:</p>
  <pre><code>react-jsx-dev-runtime.development.js?bfcc:117 Warning: Each child in a list should have a unique &quot;key&quot; prop.
  
  Check the render method of `Feed`. See https://reactjs.org/link/warning-keys for more information.
  </code></pre>
  <p>This is my code in the return statement:</p>
  <pre><code>return (
      &lt;&gt;
        &lt;Header&gt;&lt;/Header&gt;
        &lt;div className={hfstyles.feed} style={{ 'maxWidth': '980px;', 'textAlign': 'center', 'margin': '0 auto', 'padding': '5em 0' }}&gt;
  
          {feed.map((post, index) =&gt; {
            const postBefore = index == 0 ? new Date() : feed[index - 1].createdAt;
            return randomIndex == index ? (
              &lt;&gt;
              &lt;PostBasic
                post={post}
                postBefore={postBefore}
                key={post.id}
              /&gt;
              &lt;RandomMessage/&gt;
              &lt;/&gt;)
              :
              (&lt;PostBasic
                post={post}
                postBefore={postBefore}
                key={post.id}
              /&gt;
            );
          })}
  
          {feedEnd == true &amp;&amp; (
            &lt;p&gt;Thats it&lt;/p&gt;
          )}
  
        &lt;/div&gt;
        &lt;Footer sticky={false}&gt;&lt;/Footer&gt;
      &lt;/&gt;
    );
  </code></pre>
  <p>I also tried to provide a <code>key</code> property to the <code>&lt;RandomMessage/&gt; component</code> and I tried to change the key from database id <code>post.id</code> to the <code>index</code> of the map without any change</p>