title: React component displaying different props than given
body: <p>I have created a minimized test site on codesandbox.io to illustrate my issue:</p>
  <p><a href="https://codesandbox.io/s/floral-glitter-ege9o?file=/src/functions/helperFunctions.js" rel="nofollow noreferrer">https://codesandbox.io/s/floral-glitter-ege9o?file=/src/functions/helperFunctions.js</a></p>
  <p>It appears to me the component to which I am passing props receives props other than what I am providing. I would appreciate any assistance in understanding why this is occurring.</p>
  <p>On the Home.js page, I am mapping over an array of items from the provided local data file (data/data.js). For this test, I display on the sandbox browser the id property of the data item being supplied as props to the component. I have also logged to the console the value of the prop within the map method. One may see, however, with a few sandbox browser refreshes that the two values do not always match.</p>
  <p>Little Update (but still no answer) :</p>
  <p>It seems to matter how I am preparing the data before mapping over it to create the TestCard component (as @Konstantin Modin suggested). Why should that matter? Of course, when I use the raw data before messing with it, it just displays all data in order without issue.</p>
  <p>I need to be able to find only data that has images (in the real project data, some items in the data array don’t have images). and then randomize the selection to display different images on each page visit.</p>