How to make Simple React Lightbox automatically open image with link in Gatsby

I am creating a webpage with Gatsby, Gatsby Image gallery and [Simple React Lightbox][1]. My goal is to make gallery image automatically open inside if the corresponding query is entered in the URL.

For example: when "example.com/images?id=0" is selected the first image will automatically open up. When "example.com/imades?id=1" is entered the second image will automatically open etc.

I tried using Simple React Lightbox [hooks][2] but the problem right now is that the image will open only when onClick event is triggered.

I tried getElementsByClassName.click(), useEffect and useRef but so far could not find working solution.

How can I make images open automatically when URL with specific query is selected?

Here is my gallery code

import * as React from "react"
import { graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import SimpleReactLightbox, { SRLWrapper } from "simple-react-lightbox"
import { useLightbox } from "simple-react-lightbox"
import Layout from "../components/layout"
import Seo from "../components/seo"
import Buttons from "../components/Buttons"

function Images({ data }) {
  const { t } = useTranslation()
  const images = data.allFile.edges

  const { openLightbox } = useLightbox()
  const queryParams = new URLSearchParams(window.location.search)
  const term = queryParams.get("id")

  return (
    <Layout>
      <Seo title="Portfolio" />
      <section>
        <div className="container">
          <SimpleReactLightbox>
            <SRLWrapper>
              <div className="row">
                {images.map((image, i) => (
                  <div
                    className="img-col col-sm-12 col-md-6 col-lg-3"
                    key={image.node.id}
                  >
                    <a
                      href={image.node.publicURL}
                      target="_blank"
                      rel="noreferrer"
                    >
                      <GatsbyImage
                        className="ratio ratio-1x1"
                        image={image.node.childImageSharp.gatsbyImageData}
                        alt={`https://example.com/images/?id=${++i}`}
                      />
                    </a>
                  </div>
                ))}
              </div>
            </SRLWrapper>
            <Buttons className="shared-img" term={term} />
          </SimpleReactLightbox>
        </div>
      </section>
    </Layout>
  )
}

export default Images

Here is Buttons code

import { useLightbox } from "simple-react-lightbox"
import React from "react"

export default function Buttons({ term }) {
  const { openLightbox } = useLightbox()
  return (
    <>
      <button className="shared-img" onClick={() => openLightbox(term - 1)}>
        Open the {term} image
      </button>
    </>
  )
}

Thanks! [1]: https://github.com/michelecocuccio/simple-react-lightbox [2]: https://github.com/michelecocuccio/simple-react-lightbox#hooks