Having issue rendering an img src from an array in React

I have an array with some list of items, also the image folder inside of src folder. Have tried with public folder, I didn't work aswell.

Everything else is working fine and perfect except the img src. so in that case, it'll always render error to the page [image]. How else can i do this please

export default [
{
    number: 1,
    img: "kyber.png",
    name: "Compound",
    symbol: "COMP",
    duration: "05/07/2022",
    reward: "1,000,000",
    participants: "500k+"
},
{
    number: 2,
    name: "Revuto",
    symbol: "REVU",
    duration: "05/10/2022",
    reward: "3,000,000",
    participants: "700k+"
},
{
    number: 3,
    name: "Cronos",
    symbol: "CRO",
    duration: "05/15/2022",
    reward: "333,000",
    participants: "400k+"
}

function Trending (props) {
    return (
        <div className="trending">
            {ranking}
            <h2 className="trending--number">{props.trend.number}</h2>
            <img className="trending--img" src={require('../images/**{props.trend.img}**')} />
            <h2 className="trending--name">{props.trend.name} <b>{props.trend.symbol}</b>
            <p className="trending--end">Ending on: (props.trend.duration}</p>
            </h2>
            <i id="trending--more" class="fa-solid fa-angle-right"></i>
        <div>
    )
}```


  [1]: https://i.stack.imgur.com/uZqIA.png