require doesn’t work when called in a sub directory in reactjs

I want to render star.png on html, using require called in Test.js inside components directory.
But it gives me error: Uncaught Error: Cannot find module './star.png' ....

My directory structure looks like:

• …
• public
• src
  • components
    • Test.js
  • images
    • star.png
  • index.js

My code:

src/components/Test.js:

import React from "react"

export default function Test(props){
    return (
        <div>
            <h1>{props.text}</h1>
            <img src={props.img && require(`../images/${props.img}`)} />
        </div>
    )
}

src/index.js:

import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"

function App(){
    let img = 'star.png'
    let text = 'Hello'

    return (
        <Test
            text={text}
            img={img}
        />
    )
}

ReactDOM.render(<App />, document.getElementById("root"))

FULL ERROR:

Uncaught Error: Cannot find module './star.png'
    at webpackContextResolve (.*$:10:1)
    at webpackContext (.*$:5:1)
    at Test (Test.js:8:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)

---

However it does work if I call require inside index.js and just pass the return value of require as props like:

src/index.js:

import React from "react"
import ReactDOM from "react-dom"
import Test from "./components/Test"

function App(){
    let img = require('./images/star.png')
    let text = 'Hello'

    return (
        <Test
            text={text}
            img={img}
        />
    )
}

ReactDOM.render(<App />, document.getElementById("root"))

AND src/components/Test.js:

import React from "react"

export default function Test(props){
    return (
        <div>
            <h1>{props.text}</h1>
            <img src={props.img && props.img} />
        </div>
    )
}

But I don’t want to do operations inside index.js, I only want to do it inside Test.js. How can I do that?

(Note: I have this seen thread but it’s completely different.)