React 18.2.0-style property not rendering image

I am currently working through the ZTM React course version 18.2.0 in Udemy. For whatever reason, posting questions has been disabled on Udemy website so I am posting here. The following code renders fine when I run it-all except for the images. The image url is valid when put into a browser. There are no other errors whatsoever. The only issue is that the image is not showing.

    import "./categories.styles.scss"
//import CategoryItem from "./components/category-item/category-item.component";

const App = () => {
  const categories = [
    {
      "id": 1,
      "title": "hats",
      "imageUrl": "https://i.ibb.co/cvpntL1/hats.png"
    },
    {
      "id": 2,
      "title": "jackets",
      "imageUrl": "https://i.ibb.co/px2tCc3/jackets.png"
    },
    {
      "id": 3,
      "title": "sneakers",
      "imageUrl": "https://i.ibb.co/0jqHpnp/sneakers.png"
    },
    {
      "id": 4,
      "title": "womens",
      "imageUrl": "https://i.ibb.co/GCCdy8t/womens.png"
    },
    {
      "id": 5,
      "title": "mens",
      "imageUrl": "https://i.ibb.co/R70vBrQ/men.png"
    }
  ];
  
 
  return (
    <div className="categories-container">
      {categories.map(({title,id,imageUrl}) => (

        <div key={id} className="category-container">
          <div 
            className='background-image' 
            style={{
            backgroundImage: `url(${imageUrl})`
          }}>

          </div>
          
          <div className='category-body-container'>
          <h2>{title}</h2>
          <p>Shop Now</p>
        </div>
      </div>

      ))}
    </div>
  );    
 
};

export default App;