React: How To Hide A Component By Clicking On It?

I am trying to make a React component hidden by clicking on it but all I see online are explanations about event handlers on buttons and the like.

I'm using Next.js (but I don't think these means much for this).

This is my component:

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {
    return (
        <div className={styles.popup}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>                    
            </div>
        </div>
    )
}

Try setting a state on click of your component. Below code should work.

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {

    const [visible, setVisible] = React.useState(true);

    if(!visible) return null;

    return (
        <div className={styles.popup} onClick={() => setVisible(false)}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that sydney sauna will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>
                <div className={styles.buttonContainer}><button className={styles.button}>Okay</button></div>

            </div>
        </div>
    )
}

Hope it helps.