React only rendering one image in my component

Question

I created a map inside a react component using a map to generate items, including a URL from a data set I created. The map only returns one item: Coffee 2 A blend of coffee beans from La Bolsa in Colombia. and 1 Photo[actual image]. that's if I include the url in my map. If I leave it out, I see all my items correctly but the URL, shows up like: 'Http.." so the actual image doesn't show up.

Problem: need to display all items in data set, including the image.

Here is my map:

  return (
    <>
      {/* Iterate to generate the items*/}
      <div className="item-container">
        {MenuItems.map((item, index) => (
          <div key={index}>
            <h3>{item.name}</h3>
            <h3>{item.price}</h3>
            <p>{item.description}</p>
            <img src={item.url} />
          </div>
        ))}
      </div>
    </>
  );
};

export default Item;

Here is my data:

const MenuItems: MenuItem[] = [
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1642976846/coffee_vugltr.jpg",
    name: "Coffee",
    description: "A blend of coffee beans from La Bolsa in Colombia.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1642986682/orangejuice_tn6qba.jpg",
    name: "OJ",
    description: "Cold pressed and freshely squeezed orange juice.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1642986807/tea_ami59z.jpg",
    name: "Tea",
    description: "Choice of Earl Grey, Green Tea, Chamomile, or Peppermint.",
  },
  {
    category: "Drinks",
    price: 2,
    url: "https://res.cloudinary.com/dlsacnkot/image/upload/v1642987388/icedtea_vg18uc.jpg",
    name: "Iced Tea",
    description: "Allegro loose-leaf black iced tea, unsweetened.",
  },