Photoswipe putting image ids in the browser history

Question

I'm using React Photoswipe Gallery (Photoswipe 5.2.8) with Next.js. I have a galleries home page linking to separate subpages. Each of these subpages contains a series of thumbnails. If you click on them, you open a Photswipe gallery. As you click through the gallery, the url changes to reflect the id of the picture e.g. http://localhost/pictures/gallery1#&gid=photo-gallery&pid=1, ...pid=2, ...pid=3 etc.

Let's say you click through ten images and then close the lightbox. The url returns to the base url of the page, without the parameters e.g. http://localhost/pictures/gallery1. This is all good, except when you want to return to the galleries home page you have to click the back button ten times to scroll back though all the urls with pids in. In the meantime, the user doesn't know what's happening because the page doesn't change when they click the back button.

I have a non-React instance of Photoswipe running elsewhere and it behaves as expected. You close the lightbox, the pid disappears, you click back and you go back to the gallery home page immediately. All the pids are not in the browser history. Have I got the configuration wrong somewhere? I can't find anything online except that Photoswipe removed its History API in v5, so it wouldn't mess with the browser history!

import "photoswipe/dist/photoswipe.css";
import { Gallery, Item } from "react-photoswipe-gallery";

export default function picGallery(props: Object) {
  const data = Array.from(Object.values(props));
  return (
    <div className="max-w-6xl grid grid-cols-1 md:grid-cols-4 gap-x-6 gap-y-8 text-base">
      <Gallery
        withCaption
        id="photo-gallery"
        options={{
          bgOpacity: 1,
          padding: { top: 20, bottom: 50, left: 20, right: 20 },
        }}
      >
        {data.map(
          (pic: {
            id: number;
            title: string;
            description: string;
            smallImage: string;
            bigImage: string;
            width: number;
            height: number;
          }) => (
            <figure key={pic.id} className="cursor-pointer">
              <Item
                id={pic.id}
                original={pic.bigImage}
                thumbnail={pic.smallImage}
                width={pic.width}
                height={pic.height}
                alt={pic.title}
              >
                {({ ref, open }) => (
                  <a
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      open(e);
                    }}
                    ref={ref as React.MutableRefObject<HTMLAnchorElement>}
                  >
                    <img onClick={open} src={pic.smallImage} alt={pic.title} />
                  </a>
                )}
              </Item>
              <figcaption className="pt-2">{pic.title}</figcaption>
            </figure>
          )
        )}
      </Gallery>
    </div>
  );
}

There was an option to ignore history but that seems to have gone.