La URL de item.image proviene de la API, pero cuando intento mapear en la etiqueta <a> , funcionará bien, que es para el ícono de descarga, pero para el ícono de vista, abrirá el mismo archivo. 
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> </> })Debería usar <img> en lugar de <iframe> .
Los iframes son para incrustar otros sitios web en su sitio web.
Para los medios ya existen etiquetas como <img> o <video> .
Probar:
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> </> })