item.image URL is coming form the API but when I try to map in <a> tag it will work fine which is for the download icon but for the view icon it will open the same file. 
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<iframe src={item?.image}>
</iframe>
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})
You should be using <img> instead of <iframe>.
iframes are to embed other websites into your website.
For media there already exist tags like <img> or <video>.
Try:
data.map(item => {
return <>
<Modal open={open} onClose={onCloseModal} center>
<div className="modalContent">
<img src={item?.image} />
</div>
</Modal>
<a href={item?.image} target="_blank" download >
<span className="IconBoc">
<AiOutlineDownload />
</span>
</a>
</>
})