Usa la posición del array que trae las opciones para designar una imagen a mostrar según la opción seleccionada.
//La data que podría traer un fetch
const fetchedData = [
{ _id: 1, title: "Image1", image: "image_url1" },
{ _id: 2, title: "Image2", image: "image_url2" },
]
//...
const [images, setImages] = useState([]);
const [loaded, setLoaded] = useState(false);
const [options, setOptions] = useState([]);
useEffect(() => {
if(!loaded){
setLoaded(true);
setOptions(fetchedData);
const selectedImages = fetchedData.map(item => "" ); //["", ""]
setImages(selectedImages);
}
},[]);
const selectImage = (imageUrl, index) => {
const updatedImages = images.map((item, i) => i == index ? imageUrl : item );
setImages(updatedImages);
}
Entonces debes agregar el index en tu map de options
options.map( ({_id, title, selectId, image}, index) => (
(data._id === selectId) ?
<div key={_id} className="options">
<input type="radio" id={_id} name={selectId} value={title}/>
<label for={_id} onClick={ () => selectImage(image, index) }>{title}.</label>
</div>
: null
)
)
Y tus imágenes deberán mostrarse de esta manera
{images.map((img, i) => (img != "" ? <img key={i} src={img}></img> : null)}
Ahora lo más probable es que quieras también controlar los valores de los input. Para ese caso repite lo de la imagen y fusiona la función de selectImage() para enviarle el value del input que quieras enviar a backend.
Una opción a esto último para obtener un array de los valores seleccionados:
const optionsSelected = options.filter((opt, i) => images[i] != "" );