i just started react js but having trouble in importing a path of image to the webpage. I have a folder named assets and it have images, i want to use those images in my project but when giving it as a input in the code it shows: "ERROR in ./src/containers/products/Products.jsx 7:0-33 Module not found: Error: Can't resolve '../../assets/'"

Here is the code for the following

import React from 'react';
import './products.css';
import {Prodfeat} from '../../components'
import logo from '../../assets/';

const Products = () => {
    return (
      <div className='gpt3__products' id='products'>
        <div className='gpt3__products-heading'>
          <h1>We have something for everyone!</h1>
        </div>
        <div>
          <Prodfeat title='product 1' text='description of product1' productimg={`${logo}blog01.png`}/>
          <Prodfeat title='product 2' text='description of product2' productimg={`${logo}blog02.png`}/>
          <Prodfeat title='product 3' text='description of product3' productimg={`${logo}blog03.png`}/>
        </div>

      </div>
    )
  }

here is the code for the prodfeat component:

import React from 'react';
import './prodfeat.css';

const Prodfeat = ({title, text, productimg}) => {
  return (
    <div className='gpt3__prodfeat' >
        <div className='gpt3__prodfeat-desc'>
            <div className='gpt3__prodfeat-heading'>
                <h2>{title}</h2>
            </div>
            <div className='gpt3__prodfeat-text'>
                <p>{text}</p>
            </div>
        </div>
        <img src={productimg} alt={title}/>
    </div>
  )
}

i want to use the {logo} as a reference variable and point toward the photo so that i dont have to write the path again and again but it is not accepting it as the path but just a string. Please if you got any suggestions guide me in this problem. Thank you