dynamically reference for image in react

I create a JS file that I named airConditions, its array of objects and each object contain some property like status for check conditions and have an src property for use in src of img

[
    {
        "id":800,
        "fa":"آسمان صاف",
        "en":"clear sky",
        "status": "clean",
        "icon": require("../../../assets/images/weather4/clean-day.png").default,
    },
    {
        "id":801,
        "fa":"کمی ابری",
        "en":"few clouds: 11-25%",
        "status": "haze",
        "icon": require("../../../assets/images/weather4/haze-day.png").default,
    },
    { 
        .
        .
        .
    }

]

I use this js file for use icon in src of img tag

<img
  className="weather-icon-png"
  src={this.state.iconSrc}
  alt={this.state.weatherDescription}
/>

but when I import the js file (airConditions)before everything it throws an error ===> ./src/json/module.js Module not found: You attempted to import ../../../assets/images/weather4/clean-day.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

before everything please see this question too. ===> stackoverflow