how to use props.img in react 18

I'm new to React (following older tutorials, but trying to work within React 18) Using props, is there a best method to be able to import an image into App.jsx?

All the rest I am set on except this bit

<img className="card-image" src={KatieZ} alt="Olympic athlete Katie Zaferes"/>

in Card.jsx -->

import "../css/index.css"
import KatieZ from '../images/katie-zaferes.png'
import Star from '../images/star.png'

function Card(props) {

    return (
      <section className="experience-cards">
        <div className="experience-item">
            <img className="card-image" src={KatieZ} alt="Olympic athlete Katie Zaferes"/>
            <p className="experience-text">Sold Out</p>
        </div>
        <div className="description-below">
            <div className="rating">
                <img className="star" src={Star} alt="Rating star" width={15}/>
                <p>{props.rating}</p><span>({props.reviewCount}) • {props.country}</span>
            </div>
            <p class="item-description">{props.title}</p>
            <p className="item-price"><span className="item-price">From ${props.price}</span> /  person</p>
        </div>
      </section>
    )
  }
  
  export default Card

in App.jsx -->

import Card from './components/Card'

export default function App() {

  return (
    <div className="container">
      <Navbar />
      <Hero />
      <Card 
        img="../images/katie-zaferes.png"
        rating="5.0"
        reviewCount={6}
        country="USA"
        title="Life lessons with Katie Zaferes"
        price={42}
      />
    </div>
  )
}