title: react-lightbox-gallery and simple-react-lightbox are not working properly
body: <p>I was trying in my react project to had an adaptive gallery that had also a lightbox when clicked on, i tried to use <strong>react-lightbox-gallery</strong> and it worked but not quite, when i inserted the src: &quot;&quot; manually was fine, when i tried to push inside an array of object and passed into the gallery component they didn't showed up, the only way they showed up was when i pass manually the first object and then push the others. In that case if i clicked on the only one rendered and then close the lightbox would render the other pushed missing images.</p>
  <p>Then i tried to change into <strong>simple-react-lightbox</strong> and it won't even show up in the DOM, it's just an empty div.</p>
  <p><strong><em><strong>UPDATE</strong></em> : The component won't load unless i change the viewport size.</strong></p>
  <p><a href="https://streamable.com/asibpx" rel="nofollow noreferrer">https://streamable.com/asibpx</a></p>
  <p><strong>Video of the problem.</strong></p>
  <p>Here's the code:</p>
  <pre><code>import React, { Component } from 'react'
  
  import { SRLWrapper } from &quot;simple-react-lightbox&quot;;
  
  import axios from 'axios';
  
  export default class Gallery extends Component {
  
      render() {
  
          var images = [];
  
          axios.get(&quot;http://localhost:80/api/main.php&quot;).then(res =&gt; {
  
              res.data.forEach(element =&gt; {
  
                  images.push({
  
                      src: &quot;http://&quot; + window.location.hostname + '/media/images/andes/' + element,
                      caption: 'Lorem ipsum dolor sit amet',
                      width: 'auto',
                      height: 'auto'
  
                  });
  
              });
  
          }).catch(error =&gt; console.log(error));
  
          console.log(images);
  
          return (
  
              &lt;div&gt;
  
                  &lt;SRLWrapper elements={images} /&gt;
  
              &lt;/div&gt;
  
          );
  
      }
  }
  </code></pre>
  <p>Here's the index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  import SimpleReactLightbox from 'simple-react-lightbox';
  
  import {
    BrowserRouter as Router
  } from &quot;react-router-dom&quot;;
  
  import 'bootstrap/dist/css/bootstrap.min.css';
  import './customCss/custom.css';
  
  ReactDOM.render(
    &lt;Router&gt;
      &lt;React.StrictMode&gt;
        &lt;SimpleReactLightbox&gt;
          &lt;App /&gt;
        &lt;/SimpleReactLightbox&gt;
      &lt;/React.StrictMode&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  );
  </code></pre>