Why are my React image imports not working?

PLEASE SEE UPDATE BELOW

This is my first time posting on stack overflow because usually I can find answers but I simply can't this time. I'm using React for the first time in a few months and just trying to show some images on the page. The imports are not working at all.

Here is where I put them

filestructure

I created an index.js inside in order to export all of them at once:

const images =
{
image1: require("./001.jpg").default,
image2: require("./002.jpg").default,
image3: require("./003.jpg").default,
image4: require("./004.jpg").default,
image5: require("./005.jpg").default,
image6: require("./006.jpg").default,
image7: require("./007.jpg").default,
image8: require("./008.jpg").default,
image9: require("./009.jpg").default
}


export default images;

I also tried similar things with an array (which is what I wanted) and with ES6 imports in case that was the issue.

I then have attempted to use them here:

import React from 'react'
import images from "../photos/index.js"
import Photo from "./Photo";

function PhotoList() {

    const photoComponents = Object.values(images).map(
        image => {
            return <Photo photo={image}/>
        }
    )

    return(
        <div>
            {photoComponents}
        </div>
    )

}

export default PhotoList

I have also tried to display just a single image using directly here and that also is broken, so it's not the Photo component that's broken, and apparently not the mapping either. It's just the imports.

And here we have the page. Everything else shows:

import React from 'react'
import Navbar from './Navbar';
import "./main.css";
import PhotoList from "./Photo";

function mainPage() {
  return (
    <div className="mainPage">
      <h1>Jei Ganiyeva</h1>
      <Navbar/>
      <PhotoList/>
    </div>
  )
}

export default mainPage;

And it shows up like this:

broken image on site

What is up with this? I can't seem to find any answers apart from people importing things wrong which I am not doing. Well, I assume I'm doing something wrong, but not in the way they are.

Thank you in advance for your help.

UPDATE:

It appears the Photo component is not receiving any props no matter what it is. See here, I have replaced the mapping with passing a simple integer variable and simply showing it as a h1 in Photo:

import React from 'react' import {images} from "../resources/photoInfo.js" import Photo from "./Photo";

function PhotoList() {

    // const photoComponents = images
    //     .map(image => {
    //         return(
    //             <Photo className="photo" source={image}/>
    //         )
    //     });

    const image = 100;
    
    return <div><Photo source={image}/></div>

}

export default PhotoList

import React from 'react'

function Photo({source}) {
  return (
    <div>
        <h1>{`The props are ${source}`}</h1>
    </div>
  )
}

export default Photo

This results in the following screen: