title: div's background is different than it's content (same values passed)
body: <p>Ok, so I have a very strange problem (I'm using next.js).</p>
  <p>I'm mapping shuffled array.</p>
  <pre><code>const otherPoepleData = shuffle(allPeople).filter(item =&gt; item.full_slug !== data.full_slug).slice(0, 3)
  </code></pre>
  <pre><code>{otherPoepleData.map((item, index) =&gt;
    &lt;SpeakerNew data={item} key={item.id} index={index} /&gt;
  )}
  </code></pre>
  <p>To sum up the problem I've put inside SpeakerNew component following code:</p>
  <pre><code>&lt;div style={{ backgroundImage: `url(${image.filename})` }}&gt;
    {image.filename}
  &lt;/div&gt;
  </code></pre>
  <p>And here are the results:</p>
  <pre><code>&lt;div style=&quot;background-image: 
    url(https://something.com/blablaba57674676343zzx.png);&quot;&gt;
        https://something.com/blablaba13123123dasdzz.png
  &lt;/div&gt;
  </code></pre>
  <p>The content of the div is 100% correct, however the backgroundImage url is incorrect. Taken from completely other person from array I'm mapping. What coulde be the problem here?</p>