I am facing problem using Simple React Lightbox Next js?

I am building nextjs application. I want a lightbox feature that only show a button, then when I click the button it show the lightbox gallery. But default or on page load there should not be show images. Just when I click a button it show light box. Like when I clicked the button-

Then It start lightbox-

How can I do that?

Here I am trying to use Simple React LightBox. This package support hook. But there are not well documented to understand how to use hook. First Of all I create a button and then I create a lightbox component. Like this-

import {Container, Flex, Box, Image, Paragraph} from "theme-ui";
import SingleRooms from "data/SingleRooms";
import SimpleReactLightbox, {SRLWrapper, useLightbox} from "simple-react-lightbox";

const SingleImages = () => {
    const {openLightbox, closeLightbox} = useLightbox()
    return (
        <Container>
            <button onClick={() => openLightbox()}>
                Open the third image
            </button>
            <SimpleReactLightbox>
                <SRLWrapper>
                    <a href={SingleRooms.images[0].path}>
                        <img src={SingleRooms.images[0].path} alt="Umbrella"/>
                    </a>
                    <a href={SingleRooms.images[1].path}>
                        <img src={SingleRooms.images[1].path} alt="Blue sky"/>
                    </a>
                </SRLWrapper>
            </SimpleReactLightbox>
        </Container>
    );
};

export default SingleImages;

It is not working. Actually I don't know to use it. Please help me to use it with my wanted options. Just show a button then when clicked button there should be show the light box. Please help me.