我用这段代码显示了一个图片库，现在，图片的显示和预期的一样，但是当我点击一个图片时，那个图片会全屏展开，我不能导航到下一个图片

import React, { useState, useEffect } from 'react';
import img1 from './assets/img/gallery/gallery-1.jpg';
import img2 from './assets/img/gallery/gallery-2.jpg';
import img3 from './assets/img/gallery/gallery-3.jpg';
import img4 from './assets/img/gallery/gallery-4.jpg';
import img5 from './assets/img/gallery/gallery-5.jpg';
import img6 from './assets/img/gallery/gallery-6.jpg';
import img7 from './assets/img/gallery/gallery-7.jpg';
import img8 from './assets/img/gallery/gallery-8.jpg';
import GLightbox from 'glightbox';

export default function Footer() {

return(
    <section id="galerie" class="gallery">
      <div class="container">

        <div class="section-title">
          <h2>Galerie</h2>
          <p>In această secțiune vă prezentăm câteva dintre produsele noastre. Pentru a vedea gama completă, va invităm să accesați pagina de Produse.</p>
        </div>
      </div>

      <div class="container-fluid">
        <div class="row g-0">

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img1} onClick={handleClick}>
                <img src={img1} alt="" class="img-fluid" onClick={handleClick}/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4" onClick={handleClick}>
            <div class="gallery-item">
              <a href={img2}>
                <img src={img2} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img3} class="galelry-lightbox">
                <img src={img3} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img4} class="galelry-lightbox">
                <img src={img4} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img5} class="galelry-lightbox">
                <img src={img5} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img6} class="galelry-lightbox">
                <img src={img6} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img7} class="galelry-lightbox">
                <img src={img7} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href={img8} class="galelry-lightbox">
                <img src={img8} alt="" class="img-fluid"/>
              </a>
            </div>
          </div>

        </div>

      </div>
    </section>
);
}

我正在使用react。当我点击图像时，它会展开，我想显示两个箭头来在图像之间导航。如何创建箭头来在箭头之间导航？