Not able to show image using getelementbyId method

i am having a div element with an image which is shown based on an api condition.also when i click particular part of the image i am suppose to show a picture related to that in the bottom.I figured out switch case implementation to carry this out and setting the html in a variable and later showing it in the div.Relevant part of my code is as follows,

import React,{useEffect, useState} from 'react'
import '../../../assets/styles/modal.scss';
import '../../../assets/styles/styles.scss';
import { useTranslation } from 'react-i18next';
import {useLocation } from 'react-router-dom';
import B777 from '../../../assets/images/B777.jpg';
import A350 from '../../../assets/images/A350.png';
import galley from '../../../assets/images/galley.jpg';
import { _ } from 'ag-grid-community';
import { DFPAPIEndpoint } from '../../../utils/axios';


export const ConfigureGalley = (props) => {
  let location = useLocation();
  const { t } = useTranslation();
  
  const [imageCord,setImageCord]=useState({x:'',y:''});
  const [carts,setCarts]=useState([]);
  const [galleyItems,setGalleyItems]=useState({});
  const [galleyImage,setGalleyImage]=useState(false);
  const[modalFormStatusObj,setModalFormStatusObj]=useState({text:''})
  const [inputFields,setInputFields]=useState(false);


  useEffect(() => {
      setGalleyItems(JSON.parse(localStorage.getItem("galleyDetails")));
    if(galleyItems){
      setCarts(galleyItems.galleys)
    }
    
  }, [location.pathname])

  useEffect(() => {
    setCarts(galleyItems.galleys)
   
     document.getElementById("aircraft").onclick = function(e) {
    let rect = e.target.getBoundingClientRect();
    let x = e.clientX - rect.left; //x position within the element.
    let y = e.clientY - rect.top;  //y position within the element.
    setImageCord({x,y})
  }
}, [galleyItems]);


const showGalleyImages=(imageCord)=>{
  let res=''
  if(Object.values(imageCord).length){
switch (true) {
  case imageCord.x>91&&imageCord.x<147 && imageCord.y>120 &&imageCord.y<178:
     res = '<img src={galley}/>' ;
    break;

  default:
    break;
}
  }
  document.getElementById('galleyDesign').innerHTML=res;
  return res;
}
console.log("image cordinates-------------",imageCord.x,imageCord.y);


  


  return (
    <>
    <div className="container-fluid dashboard-summary-container sm-scrollbar">
        <div className="op-aircraft-container flexCol full-flex ag-theme-alpine-dark">
           
        <div style={{position:'relative',marginTop:'100px',border: '1px solid green',cursor:'pointer'}} className="row flexRow" id="aircraft">
    {Boolean(galleyItems)&& Object.values(galleyItems).includes('A350')? <img src={A350}  alt='' width="50%" height="50%"/>:<img src={B777}   alt='' width="50%" height="50%"/>}
    </div>

    <div style={{position:'relative',marginTop:'100px'}} className="row flexRow" id='galleyDesign'>
    {showGalleyImages(imageCord)}
    </div>

       </div>
    </>
);

}

the galley image which i am loading in the tag inside the showGalleyImages is not getting shown for me also css properties could not be given like this. is there a better approach to this. the image html block which i am trying to show is,

<img src={galley}  alt='' width="50%" height="50%"/>

where the width and height should also be given

>Solution :

Regardless to the logic behind showGalleyImages function, it will be executed before imageCord change, you need to have a boolean useState to show the gallery image, and useEffect to detect the imageCord change.

import React,{useEffect, useState} from 'react'
import '../../../assets/styles/modal.scss';
import '../../../assets/styles/styles.scss';
import { useTranslation } from 'react-i18next';
import {useLocation } from 'react-router-dom';
import B777 from '../../../assets/images/B777.jpg';
import A350 from '../../../assets/images/A350.png';
import galley from '../../../assets/images/galley.jpg';
import { _ } from 'ag-grid-community';
import { DFPAPIEndpoint } from '../../../utils/axios';


export const ConfigureGalley = (props) => {
  let location = useLocation();
  const { t } = useTranslation();
  
  const [imageCord,setImageCord]=useState({x:'',y:''});
  const [carts,setCarts]=useState([]);
  const [galleyItems,setGalleyItems]=useState({});
  const [galleyImage,setGalleyImage]=useState(false);
  const[modalFormStatusObj,setModalFormStatusObj]=useState({text:''})
  const [inputFields,setInputFields]=useState(false);
  const [showGallery, setShowGallery] = useState(false);


  useEffect(() => {
      setGalleyItems(JSON.parse(localStorage.getItem("galleyDetails")));
    if(galleyItems){
      setCarts(galleyItems.galleys)
    }
    
  }, [location.pathname])

  useEffect(() => {
    setCarts(galleyItems.galleys)
   
     document.getElementById("aircraft").onclick = function(e) {
    let rect = e.target.getBoundingClientRect();
    let x = e.clientX - rect.left; //x position within the element.
    let y = e.clientY - rect.top;  //y position within the element.
    setImageCord({x,y})
  }
}, [galleyItems]);

useEffect(() => {
  setShowGallery(imageCord.x>91&&imageCord.x<147 && imageCord.y>120 &&imageCord.y<178)
}, [imageCord])

  return (
    <>
    <div className="container-fluid dashboard-summary-container sm-scrollbar">
        <div className="op-aircraft-container flexCol full-flex ag-theme-alpine-dark">
           
        <div style={{position:'relative',marginTop:'100px',border: '1px solid green',cursor:'pointer'}} className="row flexRow" id="aircraft">
    {Boolean(galleyItems)&& Object.values(galleyItems).includes('A350')? <img src={A350}  alt='' width="50%" height="50%"/>:<img src={B777}   alt='' width="50%" height="50%"/>}
    </div>

    <div style={{position:'relative',marginTop:'100px'}} className="row flexRow" id='galleyDesign'>
    {
    showGallery ? <img src={galley}/> : null
    }
    </div>

       </div>
    </>
);

}