How to use ClickAwayListener Component in ReactJS ?

// Filename - App.js

import React from "react";
import { lightBlue } from "@material-ui/core/colors";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";

export default function App() {
    const [open, setOpen] = React.useState(false);

    const handleClickAwayEvent = () => {
        setOpen(false);
    };

    const handleClickEvent = () => {
        setOpen((prev) => !prev);
    };

    return (
        <div style={{ display: "block", padding: 30 }}>
            <h4>
                How to use ClickAwayListner Component in
                ReactJS?
            </h4>
            <ClickAwayListener
                onClickAway={handleClickAwayEvent}
            >
                <div
                    style={{
                        position: "relative",
                    }}
                >
                    <button
                        type="button"
                        onClick={handleClickEvent}
                    >
                        ClickAwayListener Demo
                    </button>
                    {open ? (
                        <div
                            style={{
                                width: 150,
                                position: "absolute",
                                right: 0,
                                fontSize: 9,
                                border: "1px solid",
                                left: 0,
                                backgroundColor: lightBlue,
                                zIndex: 1,
                                padding: 3,
                                top: 28,
                            }}
                        >
                            It will be visible until you
                            click outside this box
                        </div>
                    ) : null}
                </div>
            </ClickAwayListener>
        </div>
    );
}