Image doesn't show up in react render

Question

I want to add an image in a tinder-clone app. I followed the mern stack tutorial on the clever programmer youtube channel. Unfortunately, the image didn't show up in the browser.

This is my code:

import React, { useState } from 'react';
import "./TinderCards.css";
import TinderCard from 'react-tinder-card';

function TinderCards() {
  const [people, setPeople] = useState([
    {
      name: 'Elon Musk',
      url: "https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg",
    },
  ]);

  const swiped =(direction, nameToDelete) => {
    console.log("removing: " + nameToDelete);
  };

  const outOfFrame = (name) => {
    console.log(name + "left the screen!");
  };

  return (
  <div className="tinderCards">
  <div className="tinderCards__cardContainer">
  {people.map(person => (
    <TinderCard
    className="swipe"
    key={person.name}
    preventSwipe= {["up", "down"]}
    onSwipe={(dir) => swiped(dir, person.name)}
    onCardLeftScreen={() => outOfFrame(person.name)}
    >
    
    <div
    style={{ backgroundImage: 'url(${person.url})' }}
    className="card"
    >

    <h3>{person.name}</h3>
    </div>
    </TinderCard>
  ))}
  </div>
  </div>
  );
}

export default TinderCards

And this is what I see in the browser:

tinder clone