How to display an image from blob storage on my react/django website

Question

My website is built with react/django. My website allows users to view vases from a database, each vase has 0,1 or many images(aka plate). The images are stored in Azure blob storage account and they are saved as their ID (plateRef). My database has three tables, Vase (PK is vaseRef and stores other vase info), Plate (PK is plateRef), and many-to-many table Plate_Vase (vase and plateRef). I need to display an image based off the vaseRef, so then when the user views a Vase record, they can see all of the images/plates for that Vase. Our current approach is using the URL of the blob storage in an image carousel. We have created an API that takes in the vaseRef (retrieved from the URL) and returns the plateRefs for that vaseRef. The API works okay, but when trying to use it to display the image in an img tag it returns as undefined. this is the page that is calling and consuming the API:

const VaseImg = (props) => {
  return <img src={props.name} width="500px" height="auto"/>; 
}
const urlParams = new URLSearchParams(window.location.search);
const vaseRef = urlParams.get('vaseRef');
console.log(vaseRef);


const getImg = (vaseRef)=>{
  const [Data,setData]=useState({
      plateRef:''
  })
  useEffect(()=>{
    axios.get(`http://127.0.0.1:8000/api/getplate/?vase=${vaseRef}`)//get the selected vase using the vaseID passed through the URL
        .then(res=>{
            console.log('Response from main API: ',res) //printing the response to the console
            let plateData=res.data[0]; //add data to vaseData, then assign into each variable
            setData({plateRef:plateData.plateRef}) 
        })
        .catch(err=>{
            console.log(err);
        })
      console.log(vaseRef)
  },[])
  return(
    <>
      {Data.plateRef}
    </>
  )
}

const images = [
  <img src={`https://trendallplates.blob.core.windows.net/images/${plateRef}.png`}/>//plateRef is returning as undefined
];

class Gallery extends React.Component {
  state = {
    galleryItems: images.map((i) => (
      <Wrapper>
        {i}
      </Wrapper>
    ))
  };

  responsive = {
    0: { items: 1 },
    1024: { items: 1 }
  };

  onSlideChange(e) {
    console.debug("Item`s position during a change: ", e.item);
    console.debug("Slide`s position during a change: ", e.slide);
  }

  onSlideChanged(e) {
    console.debug("Item`s position after changes: ", e.item);
    console.debug("Slide`s position after changes: ", e.slide);
  }

  render() {
    return (
        <FormDiv>
          {/*<BackBtn/>*/}
          <div className="img-gallery">
            <AliceCarousel
              items={this.state.galleryItems}
              responsive={this.responsive}
              autoPlayInterval={2000}
              autoPlayDirection="ltr"
              autoPlay={false}
              fadeOutAnimation={true}
              playButtonEnabled={false}
              disableAutoPlayOnAction={true}
              onSlideChange={this.onSlideChange}
              onSlideChanged={this.onSlideChanged}
            />
          </div>
        </FormDiv>
    );
  }
}

export default Gallery;

and this is views.py:

#API view to retreive the plateRef using the vaseRef passed as a URL parameter 
class GetPlate(generics.ListAPIView):
    serializer_class = PlateSerializer 
    def get_queryset(self):
        queryset = Plate.objects.all()
        vase = self.request.query_params.get('vase')
        if vase is not None:
            try:
                queryset = queryset.filter(vase=vase)
            except Exception as e:
                print(e)
        return queryset

Where am i going wrong? Is there a better way to access the images?