Add css transition when onclick in react

Question

Hihi, I want to add a transition when the lightbox is set to true and then when it's set to false but I'm now able to reach it. I was able to add a transition when I hover the image but I can add it this. Could anyone help me getting this??

import '../assets/scss/gallery.scss';
import { useState, useEffect } from 'react';

// import Gallery from 'react-grid-gallery';

function Images() {
  const [imageToShow, setImageToShow] = useState('');
  const [showLightbox, setShowlightbox] = useState(false);

  const showImage = (image) => {
    setImageToShow(image);
    setShowlightbox(true);
  };
  // hide lightbox
  const hideLightBox = () => {
    setShowlightbox(false);
  };

  useEffect(() => {
    // eslint-disable-next-line no-unused-expressions
    showLightbox ? document.body.classList.add('of') : document.body.classList.remove('of');
  }, [showLightbox]);

  return (
    <section>
      <div className="container">
        <div className="gallery">
          <div className="gallery-item" data-category="business">
            <button
              type="button"
              data-lightbox="example-set"
              className="lightbox"
              onClick={() => showImage('https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg')}
              data-title="Click the right half of the image to move forward."
            >
              <img src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg" alt="gallery-images" className="hover-shadow" />
            </button>
          </div>
          <div className="gallery-item" data-category="business">
            <button
              data-lightbox="example-set"
              type="button"
              className="lightbox"
              onClick={() => showImage('https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg')}
              data-title="Click the right half of the image to move forward."
            >
              <img src="https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_w.jpg" alt="gallery-images" className="hover-shadow" />
            </button>
          </div>
        </div>
      </div>
      {
        showLightbox
          ? (
            <div>
              <button type="button" onClick={hideLightBox}>
                <div id="lightbox">
                  <img id="lightbox-img" src={imageToShow} alt="test" />
                </div>
              </button>
            </div>
          )
          : ''
      }
    </section>
  );
}

export default Images;

@import './common';

.gallery {
  display: flex;
  justify-content: space-between;
  &-item {
    @include desktop {
      margin: 10px;
      transition: all 5s;
    }

    img.hover-shadow {
      transition: 0.3s;
    }

    .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      filter: brightness(70%);
      -webkit-filter: brightness(70%);
      -moz-filter: brightness(70%);

    }
  }
  transition: all 5s;
}
.lightbox {
  &:hover{
    cursor: pointer;
  }
  border: none;
  transition: all 5s;
}

#lightbox-img {
  height: 50vh;
  max-width: 90vw;
  object-fit: cover;
  transition: all 5s;
}

#lightbox {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  transition: all 5s;
}


.of {
  overflow: hidden;
  height: auto;
} b

I added the transition:all 5s to almost everyone to see if I get it that way but I didn't have luck :(