Unable to get only image from local JSON in React

I have a problem when I try to get images from .json file in react, path is ok, also all other data are displayed with no problem, image take space and link can be seen in inspect but image itself is not shown. I have try literally everything I can do, images imported in classic way work fine (direct import not from .json file).

My code:

// import demo from "../../assets/icons/demo.jpg";
// import metalPan from "../../assets/icons/metalPan.jpg";
// import Foodie from "../../assets/icons/Foodie.jpg";
import "./Projects.scss";
import ProjectData from "../../json/projects.json";

function Projects() {
  return (
    <>
      <h2 className="section_name">Projects</h2>
      <div className="projects">
        {/* Project card */}

        {ProjectData?.map((info) => {
          return (
            <>
              <div key={info?.id} className="project_wrraper">
                <div className="project">
                  <h3 className="project_name">{info.name}</h3>
                  <div className="project_tech">
                    {info.stack.map((data) => {
                      return (
                        <div>
                          <span>{data.language}</span>
                        </div>
                      );
                    })}
                  </div>
                  <p className="project_descr">{info.description}</p>
                  <div className="project_stack">
                    <button className="stack-btn">Live version</button>
                    <button className="stack-btn">GitHub</button>
                  </div>
                </div>
                <img
                  className="project_img"
                  src={`${info.image}`}
                  alt=""
                />
              </div>
            </>
          );
        })}
        {/* end of  project card */}
      </div>
    </>
  );
}

export default Projects;

[
  {
    "id": 1,
    "name": "Metal Pan",
    "stack": [
      {"language": "JavaScript"},
      {"language": "Sass"},
      {"language": "BootStrap"},
      {"language": "PHP"}
    ],
    "image": "../assets/icons/metalPan.jpg",
    "description": "Web Site made for company specialized in manufacturing and setting up industrial halls and metal roofs."
  },
  {
    "id": 2,
    "name": "Foodie",
    "stack": [
        {"language": "JavaScript"},
        {"language": "Sass"},
        {"language": "HTML5"}
      ],
    "image": "../assets/icons/Foodie.jpg",
    "description": "Personal project of responsive restaurant design with gallery, blog and menu!"
  },
  {
    "id": 3,
    "name": "eShop",
    "stack": [
        {"language": "React"},
        {"language": "CSS"},
        {"language": "HTML5"}
      ],
    "image": "../assets/icons/eShop.jpg",
    "description": "Personal project of eShop store using fake api, fetch all data, single product data and filter function."
  }
]

I have tried to use many solutions but no luck some I will provide here (just to name few):

React, load images local from json

get local image path from json in react