As recommended by @Siamak, i managed to implement require.context() to solve the issue, so here is the final code

function About() {
    
    const imgFolder = require.context('./img/', false)
    
    const tempImg =['./img/Horseback-riding.jpg','./img/Snowshoeing.jpg','./img/yoga3.3.jpg','./img/rope.jpg']

    const [counter, setCounter] = useState(0);
    const [aboutImg, setAboutImg] = useState(require('./img/rope.jpg'))

    //make the image change every 5secs
    useEffect(() => {
        //Implementing the setInterval method
        const interval = setInterval(() => {
            counter === 3 ? setCounter(0) : setCounter(counter + 1);
            setAboutImg( require(`${tempImg[counter]}`))
            console.log(`aboutImg = ${aboutImg}`)
        }, 5000); // every 5secs it changes

        //Clearing the interval
        return () => clearInterval(interval);
    }, [counter]);

        return (
           <img src={aboutImg}/>
        )
    
 }
    
 export default About;