title: React Photo Gallery using an array of urls from database
body: <p>I am using this package. <a href="https://www.npmjs.com/package/react-photo-collage" rel="nofollow noreferrer">https://www.npmjs.com/package/react-photo-collage</a>
  Also, this demo is -&gt; <a href="https://codesandbox.io/s/9318y?file=/src/index.tsx" rel="nofollow noreferrer">Demo</a>
  I want to put the photos from the database in order in the image gallery with the layout [3,3].
  The images don't appear in order.
  I want to make it appear in the image gallery as [3,3] in order from the top.</p>
  <pre><code>const PhotoGridContainer = styled.div`
        padding: 0 2px !important;
        .cyNKwa {
          width: auto;
          border-collapse: collapse;
          border-style: hidden;
          border-radius: 0 16px 16px 0;
          overflow: hidden;
        }
      `;
  
  &lt;PhotoGridContainer className=&quot;col-md-6&quot; &gt;
                 &lt;ReactPhotoCollage { ...{
                      height: [&quot;199.5px&quot;, &quot;199.5px&quot;],
                      layout: [3, 3],
                      photos: listing.pics.map((pic) =&gt; (
                          [{source: [pic.file]}]
                        ))
                      }}
                    /&gt;
  &lt;/PhotoGridContainer&gt;
  </code></pre>