I am trying to display images for each object inside categoryDictonary and later display it using the html tag <img src=items.image />. However I am unable to get the desired image.
What am I doing wrong?

I would've just used links to images but the links are very very lengthy and they make the code look/feel clumsy as well.
I think its good practice to have a seperate folder for images but I'm unable to implement the same.

import { useState } from "react";
import "./styles.css";

export default function App() {
  var categoryDictonary = {
    Marvel: [
      {
        name: "WandaVision",
        image: "Images/Wanda.jfif",
        rating: 10
      },
      { name: "Loki", image: "Loki.jfif", rating: 9.5 },
      { name: "Moon Knight", image: "Images/MoonKnight.jfif", rating: 8 }
    ],
    SitComs: [
      {
        name: "Brooklyn 99",
        image: "Images/Wanda",
        rating: 10
      },
      {
        name: "Bing Bang Theory",
        image: "Images/Loki",
        rating: 7
      },
      {
        name: "Friends",
        image: "Image/Wanda",
        rating: 7
      }
    ]
  };

  var categories = Object.keys(categoryDictonary);
  var [category, setCategory] = useState("Marvel");
  function ClickHandler({ item }) {
    console.log(item);
    setCategory(item);
    console.log("Categoty is" + category);
  }

  return (
    <div className="App">
      <h2>TV Show Ratings</h2>
      <h3>Check out my ratings on some of the most popular TV Shows</h3>
      <ul>
        {categories.map((item) => {
          return (
            <li
              id="Categories"
              key={item}
              onClick={() => ClickHandler({ item })}
            >
              {item}
            </li>
          );
        })}
      </ul>
//List to display all shows of a given category
      <ul id="ShowList">
        {categoryDictonary[category].map((items) => {
          return (
            <li id="Shows" key={items.name}>
//Gives the name of the show
              <div>{items.name}</div>
//Gives the image of the show
              <div>
                <img src={items.image} />
              </div>
//Gives the rating of the show
              <div>Rating:{items.rating}</div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

Here is the corresponding output to my code: