title: How to resolve this "Target container is not a DOM element." in React with React-Image Gallery/Lightbox?
body: <p>Im trying to find a solution to what Ive been experiencing with image based galleries (in example lightbox or FancyBox). This error came up after following <a href="http://neptunian.github.io/react-photo-gallery" rel="nofollow noreferrer">this doc</a> and using <a href="https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed" rel="nofollow noreferrer">this code</a> as an 
   example.  </p>
  
  <p>I have tried using react-images to no avail, the modal doesn't display right, so I tried the links react-photo-gallery and I am encountering this error. Ive tried converting it to a component, and it didn't agree with the App function in the top portion of the file. I also tried creating a html file in my pages directory and added the import link to the illustrationGallery file, but that didn't seem to work. </p>
  
  <blockquote>
    <p>My illustrationGallery file</p>
  </blockquote>
  
  <pre><code>import React, { useState, useCallback } from "react";
  import { render } from "react-dom";
  import Gallery from "react-photo-gallery";
  import Carousel, { Modal, ModalGateway } from "react-images";
  import { illustrations } from "../components/illustrations";
  import Artwork from '../pages/gallery';
  
  function App() {
    const [currentImage, setCurrentImage] = useState(0);
    const [viewerIsOpen, setViewerIsOpen] = useState(false);
  
    const openLightbox = useCallback((event, { photo, index }) =&gt; {
      setCurrentImage(index);
      setViewerIsOpen(true);
    }, []);
  
    const closeLightbox = () =&gt; {
      setCurrentImage(0);
      setViewerIsOpen(false);
    };
  
          return (
  
              &lt;div&gt;
              &lt;Gallery illustrations={illustrations} onClick={openLightbox} /&gt;
              &lt;ModalGateway&gt;
                  {viewerIsOpen ? (
                  &lt;Modal onClose={closeLightbox}&gt;
                      &lt;Carousel
                      currentIndex={currentImage}
                      views={illustrations.map(x =&gt; ({
                          ...x,
                          srcset: x.srcSet,
                          caption: x.title
                      }))}
                      /&gt;
                  &lt;/Modal&gt;
                  ) : null}
              &lt;/ModalGateway&gt;
              &lt;/div&gt;
          );
  }
  render(&lt;App /&gt;, document.getElementById("illuGallery"));
  
  
  
  </code></pre>
  
  <blockquote>
    <p>Local host window error</p>
  </blockquote>
  
  <pre><code>invariant
  node_modules/react-dom/cjs/react-dom.development.js:56
  render
  node_modules/react-dom/cjs/react-dom.development.js:21195
  ▲ 2 stack frames were expanded.
  Module.&lt;anonymous&gt;
  src/components/illustrationGallery.js:43
    40 |             &lt;/div&gt;
    41 |         );
    42 | }
  &gt; 43 | render(&lt;App /&gt;, document.getElementById("illuGallery"));
    44 | 
  
  </code></pre>
  
  <p>This error description is towards the top, but there are more</p>
  
  <p>Just trying to achieve something that displays a proper image gallery using react, would it be easier to just make it using another doc or from scratch? Does anyone have any recommendations or answers to help?</p>