이미지 경로 관련 문의

안녕하세요. 강의 part 2 : 평화로운 쇼핑몰 레이아웃 디자인시간에서 

★ 리액트 17버전 이상에선 public 폴더안에 있는 이미지를 CSS파일에서 /image.jpg 이렇게 첨부할 수 없습니다. 

이럴 경우 이미지를 src 폴더로 옮겨서 ./image.jpg 이렇게 첨부하십시오. 

이렇게 언급하셔서 이미지 파일들을 다 src/imgs에 다 넣었습니다. (imgs안에 img1, img2, img3, img4  넣었음.)

그리고 나서 파일 제일 상단에 import로 다 가져온 후, 컴포넌트로 다이나믹하게 경로를 변경하려고 하니 자꾸 이미지가 제대로 안 나오는데 어떻게 해야할까요...? 코드는 아래와 같습니다.

import IMG1 from "../imgs/img1.png";
import IMG2 from "../imgs/home/img2.png";
import IMG3 from "../imgs/home/img3.png";
import IMG4 from "../imgs/home/img4.png";

function App() {

let [shoes, setShoes] = useState([1,2,3,4]);

return (
    <div className="App">

     {
            shoes.map((item, idx) => {
              return <Card item={shoes} idx={idx} key={idx} />;
            })
       }

    </div>

}

function Card(props) {

return (

<div>
      <strong><img src={"IMG" +(props.idx + 1)} /></strong>
      
        <h3>이미지입니다.</h3>
       
</div>
  );

}