ReactJS: Image not rendering - reactjs

Question

I am trying to render static images from images folder under src directory, however, it is not rendering, if i try to import any of the images directly and then pass in jsx like commented portion in images declaration it renders fine, also tried with backgroundImage property of css, it does not render anything.
import React, { Component } from 'react';
import Pizza from './components/pizza';
import './App.css';
class App extends Component {
state = {
open: false,
active: null,
categories: []
}
componentDidMount() {
this.setState({
categories
})
}
render() {
return (
<div className="App">
<Pizza data={this.state}/>
</div>
);
}
}
const categories = [
{"title":"Italian Pizza","link":"../images/italian-pizza.jpg",
"id":"586537da62981d5fb8c21617",
"details": "aksnflafiafoasofhafhoahfohaofhoahfhashfohasfhofhahsofohahosf"}
];
export default App;
pizza.js
import React from 'react';
import PropTypes from 'prop-types';
import italian from '../images/italian-pizza.jpg'
const Pizza = ({data}) => {
const images = data.categories.map((d,i) => {
return (
<div key={i}>
{/* <img src={italian} /> */}
<img src={`${d.link}`} />
</div>
)
});
return (
<div className="pizza">
<header className="header">Pizza</header>
<div className="main">
{data.categories.map((category, index) => {
return (
<div key={index}>
<ul className="items">
{images}
{/* <li style={{backgroundImage: `url(require(italian))`}} /> */}
</ul>
</div>
)
})}
</div>
</div>
)
}
Pizza.propTypes = {
categories: PropTypes.array,
open: PropTypes.bool,
active: PropTypes.bool
}
export default Pizza;