my image is not comming while mapping into productDETAIL PAGE

Question

CAN ANY ONE HELP ME WHILE I AM GOING INTO PRODUCT DETAIL PAGE MY PRODUCT IMAGE IS NOT COMMING ON THE PRODUCT DETAIL PAGE.ALL OTHER DETAILS ARE COMMING BUT NOT THE IMAGE CAN ANYONE HELP ME WITH IT. ITS MY PRODUCT PAGE:

const Product = () => {

    const cardItem = (item) => {
        return (
            <div class="card my-5 py-4" key={item.id} style={{width: "18rem"}}>
                <img src={item.img} class="card-img-top" alt={item.title}/>
                    <div class="card-body text-center">
                        <h5 class="card-title">{item.title}</h5>
                        <p className="lead">RS{item.price}</p>
                        <NavLink to={`/products/${item.id}`} class="btn btn-outline-primary">Buy Now</NavLink>
                    </div>
</div>
                );
    }

                return (
                <div>
                    <div className="container py-5">
                        <div className="row">
                            <div className="col-12 text-center">
                                <h1>Product</h1>
                                <hr />
                            </div>
                        </div>
                    </div>
                    <div className="container">
                        <div className="row justify-content-around">
                            {DATA.map(cardItem)}
                        </div>
                    </div>
                </div>
                )
}

AND ITS MY PRODUCT DETAIL PAGE:

const ProductDetail = () => {
    const proid = useParams();
    const proDetail = DATA.filter(x=>x.id == proid.id)
    const product = proDetail[0];
    console.log(product);
    return (
        <>
        <div className="container my-5 py-3">
            <div className="row">
                <div className="col-md-6 d-flex justify-content-center mx-auto product">
                    <img src={product.img} alt={product.title}height="400px" />
                </div>
                <div className="col-md-6 d-flex flex-column justify-content-center">
                    <h1 className="display-5 fw-bold">{product.title}</h1>
                    <hr />
                    <h2 className="my-4">RS. {product.price}</h2>
                    <p className="lead">{product.desc}</p>
                    <button  className="btn btn-outline-primary my-5">cart</button>
                </div>
            </div>
        </div>
        </>