Image doesn't show up with props in ReactJS

I have a local image and I want to put on my webpage with Props. I did src={require('../images/my-image.png')} but it didn’t work.
It only works with importing the image file, But I want it to be dynamic.

The resulting img element is this:

App.js:

export default function App() {
  return (
      <div className="App">
        <Cards img="my-image.png" />
      </div>
  )
}

Cards.js:

export default function Card(props) {
  return (
    <div>
      <img src={`../images/${props.img}`} />
    </div>
  )
}

Totally, I can not put image file in src attribute in JSX, even something like this:
<img src="../images/my-image.png" />

>Solution :

You should move your assets to the public folder instead of keeping them in the src folder. Also, you can use CDN for images if available.

Please refer to this link: React, load images local from json

My Working Code Link: https://codesandbox.io/s/zealous-borg-usgyqv