What our current photo object looks like?

{
    "Location": "https://realist-udemy-image-bucket.s3.amazonaws.com/9YmeTI7dYJtATskDybfDr.jpeg"
},

What we need?

{
    src: "https://image-bucket.s3.amazonaws.com/xxx.jpeg",
    width: 4,
    height: 3,
  },
// AdView
import Logo from "../../src/logo.svg";

  const generatePhotosArray = (photos) => {
    if (photos?.length > 0) {
      const x = photos?.length === 1 ? 2 : 4;
      let arr = [];
      photos.map((p) =>
        arr.push({
          src: p.Location,
          width: x,
          height: x,
        })
      );
      return arr;
    } else {
      return [
        {
          src: Logo,
          width: 2,
          height: 1,
        },
      ];
    }
  };

return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-4">4</div>
          <div className="col-lg-8">
            <ImageGallery photos={generatePhotosArray(ad?.photos)} />
          </div>
        </div>
      </div>
      <pre>{JSON.stringify({ ad, related }, null, 4)}</pre>
    </>
  );
export default function ImageGallery({ photos }) {}

Control the height of the images

// index.css
.react-photo-gallery--gallery img {
  object-fit: cover;
  max-height: 500px !important;
}