REACT.js – Rendering an image

I am working on an ecommerce app using React(create-react-app). I am currently working on the product detail page. My issue is that the image won’t render on the website but the rest of the information on inside the return statement rendered. I have no errors on web dev tools, the app compiled successfully. Here is the code…

ProductScreen.js

import React from 'react';
import data from '../data';
import Rating from '../components/Rating';
import { Link, useParams } from 'react-router-dom';

function ProductScreen() {

  const { id } = useParams();
  // const params = useParams();
  // const { id: productId } = params;

  const product = data.products.find((x) => x._id === (id));

  if (!product) {
    return <div> Product Not Found </div>;
  }

  return (
    <div>

      <Link to="/">Back To Result</Link>

      <div className="row top">

        <div className="col-2">

          <img className="large" src={product.image} alt={product.name} ></img>

        </div>

The Main page did render all the images though. Just very confuse as I am new to React. Not sure how to find the issue especially when there is no error showing.

screen shot of terminal, web dev tools and the app