Menampilkan list gambar yang berbeda dengan reactjs

Halo min saya mau bertanya nih gimana yah caranya menampilkan list gambar yang berbeda dengan reactjs?

Jadi disini saya memanggil url source gambarnya pake cara pemanggilan objek yang ada di Home.js,nilai objek yang ada di Home.js semuanya dipassing dengan props ke file listMakanan.js.mulai dari nama,harga,dan url gambar untuk masing2 objek.

Namun ketika berhasil mempassing url gambar,yang ada gambarnya pada gk keload semua.Ini ada contoh kodingannya.

listMakanan.js

import React,{Component} from "react";
import "./style.css";

class ListMakanan extends Component{
    constructor(props){
        super(props)
        this.state = {
            searchFood : ""
        }
    }

    handleChange = (e) =>{
        this.setState({searchFood : e.target.value});
    }

    render(){
        const {food} = this.props;
        const searchFood = this.state.searchFood.trim().toLowerCase();
        let filteredFood = food;

        if(searchFood.length>0){
            filteredFood = food.filter((food)=>{
                return food.name.toLowerCase().indexOf(searchFood) !== -1;
            });
        }

        return(
            <div className="listMakanan">
                <h1>Silahkan Pilih Makanan yang tersedia</h1>
                <div className="search">
                    <input type="text" className="inputSearch" placeholder="Masukan kata kunci pencarian" onChange={this.handleChange} />
                </div>
                <ul>
                    {filteredFood.map((food,index)=>{
                        return (
                            <li key={index}>
                                <img src={food.urlPicture} alt="" className="picResult"/> <p>{food.name} - {food.price}/Porsi</p>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

export default ListMakanan;

Home.js

import React,{Component} from "react";
import {connect} from "react-redux";
import Header from "./Components/Header";
import ListMakanan from "./Components/ListMakanan";
import "./Components/style.css";

const HeaderWithList = Header(ListMakanan);
const food = [
    {
        name        :"Tuna",
        price       :"Rp.50.000,00",
        urlPicture  :"./img/tuna.jpg"
    },
    {
        name        :"Salad",
        price       :"Rp.12.500,00",
        urlPicture  :"./img/salad.jpg"
    },
    {
        name        :"Ayam Geprek",
        price       :"Rp.20.000,00",
        urlPicture  :"./img/ayambakar.jpg"
    },
    {
        name        :"Nasi Goreng",
        price       :"Rp.14.000,00",
        urlPicture  :"./img/nasigoreng.jpg"
    },
    {
        name        :"Sosis Bakar",
        price       :"Rp.10.000,00",
        urlPicture  :"./img/sosisbakar.jpg"
    }
];

class Home extends Component{
    render(){
        return(
            <div>
                <HeaderWithList header="Selamat Datang " user={this.props.user} food={food}/>
            </div>
        );
    }
}

function mapStateToProps(state){
    return{
        user:state.addUser.user
    }
}

export default connect(mapStateToProps)(Home);

Maaf kalau rada berantakan karena baru belajar hehe,kalau ada kurang jelas boleh ditanyakan.