set state bug. SOLVED. Lighbox shouldn't be inside the caller of the Lightbox :D

[blabla].js

export default function Listing({ listing }) {
  const [isLightboxOpen, setLightboxOpen] = useState(false);
  const lightboxTransition = useTransition(
    isLightboxOpen,
    lightboxTransitionConfig,
  );

  function closeLightbox() {
    console.log(1); // we see this in console
    // why state is not changes?
    setLightboxOpen(false);
    console.log(2); // this as well. BUT THE STATE IS NOT CHANGES
  }

  return (
    <>
      <Layout
        title={`${listing.title.replace('COVE', 'Cove')} | Cove`}
        description={listing.building.profile}
        ogImage={listing.images?.gallery?.[0]?.medium_large?.url}
        stickyBtmBar={listing}
        footerClassName="!pb-24"
      >
        <div className="container">
          {listing.images?.floorplans?.[0]?.large?.url && (
            <>
              <div
                className="relative mt-2 cursor-pointer"
                role="presentation"
                onClick={() => setLightboxOpen(true)}
              >
                <img
                  src={listing.images.floorplans[0].large.url}
                  alt="floorplan"
                  className="w-full"
                />

                {lightboxTransition(
                  (style, item) =>
                    item && (
                      <Lightbox
                        style={style}
                        images={[listing.images.floorplans[0].large.url]}
                        photoIndex={0}
                        onClose={closeLightbox}
                      />
                    ),
                )}
              </div>
            </>
          )}
        </div>
      </Layout>
    </>
  );
}

Lighbox.js

import React, { useEffect, useRef, useState } from 'react';
import { Modal } from './Modal';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Lazy, Navigation, Keyboard, Mousewheel } from 'swiper';
import { Chevron, Close } from './icons';
import { classNames } from './utils';

export function Lightbox({ images, photoIndex, onClose, style }) {
  const [loaded, setLoaded] = useState(false);
  const [swiper, setSwiper] = useState(false);
  const navigationPrevRef = useRef();
  const navigationNextRef = useRef();

  useEffect(() => {
    requestAnimationFrame(() => {
      setLoaded(true);
    });
  }, []);

  useEffect(() => {
    const keydownHandler = (e) => {
      if (swiper && e.code === 'Escape' && typeof onClose === 'function') {
        e.preventDefault();
        onClose();
      }
    };

    document.addEventListener('keydown', keydownHandler);

    return () => {
      document.removeEventListener('keydown', keydownHandler);
    };
  }, [swiper]);

  return (
    <Modal
      open={true}
      onClose={onClose}
      className="flex select-none bg-transparent"
      overlayOpenClass="opacity-80"
      style={style}
    >
      <Close
        className="fixed top-4 right-6 z-10 h-5 w-5 cursor-pointer fill-white stroke-neutral-400 stroke-1 opacity-60 hover:opacity-100"
        onClick={onClose}
      />

      <Swiper
        initialSlide={photoIndex}
        className="m-auto"
        modules={[Navigation, Lazy, Keyboard, Mousewheel]}
        tag="section"
        wrapperTag="ul"
        spaceBetween={12}
        navigation={{
          prevEl: navigationPrevRef.current,
          nextEl: navigationNextRef.current,
        }}
        onBeforeInit={(swiper) => {
          swiper.params.navigation.prevEl = navigationPrevRef.current;
          swiper.params.navigation.nextEl = navigationNextRef.current;
        }}
        keyboard={{
          enabled: true,
        }}
        mousewheel
        lazy={{
          loadPrevNext: true,
          loadPrevNextAmount: 3,
          preloaderClass: 'preloader',
        }}
        loop={images.length > 1}
        onSwiper={setSwiper}
      >
        {images.length > 1 && (
          <>
            <div
              ref={navigationPrevRef}
              className="fixed top-1/2 left-0 z-10 hidden h-14 w-10 -translate-y-1/2 cursor-pointer bg-black/20 pr-1 opacity-70 hover:opacity-100 tablet:flex"
            >
              <Chevron className="m-auto h-6 w-6 fill-white stroke-2" />
            </div>

            <div
              ref={navigationNextRef}
              className="fixed top-1/2 right-0 z-10 hidden h-14 w-10 -translate-y-1/2 cursor-pointer bg-black/20 pl-1 opacity-70 hover:opacity-100 tablet:flex"
            >
              <Chevron className="m-auto h-6 w-6 rotate-180 fill-white stroke-2" />
            </div>
          </>
        )}

        {images.map((img, i) => (
          <SwiperSlide
            tag="li"
            key={i}
            className="relative m-auto min-h-[48px] w-full"
            onClick={(e) => {
              if (e.target.nodeName === 'LI' && typeof onClose === 'function') {
                onClose();
              }
            }}
          >
            <div
              className={classNames(
                'preloader fixed top-1/2 left-1/2 -ml-6 -mt-6 h-12 w-12 animate-spin rounded-full border-4 border-neutral-300 border-l-cove-coral transition-opacity duration-300',
                loaded ? 'opacity-1' : 'opacity-0',
              )}
            />

            <img data-src={img} className="swiper-lazy m-auto" alt="gallery" />
          </SwiperSlide>
        ))}
      </Swiper>
    </Modal>
  );
}