ES6 Dynamic importing issues

Question

I'm having issues with a project I'm working on using dynamic importing. I'm using react.js w/ ES6

CSS

<button className="lightbox_button ezLightbox" data-src="./img/house15.jpg">Hello World</button>

JS

(async function () {
    let image = element.dataset.src;

    var houseImage = import(`${image}`);

    lightboxImage.src = await houseImage;

    console.log(houseImage);
  })();

Here I have a button with a dataset property of src. It is meant to contain the file path to the image I want to display. In the JS I take the src from the element's dataset and try to import the file. I then use async await as it's a promise and set the element I want to have an src of the image.

the issue is it doesn't work, the lightboxImage element doesn't change src. I've tested this without using react / ES6 importing and it works perfectly, so it seems to be an issue with the importing. I console log the awaited promise and it is the image I am looking for with the promise fulfilled. element is defined and the event is getting triggered. It is reading the dataset property. Anyone know why the src either isn't getting imported properly or isn't applying to the element?