JAVASCRIPT

Popup is not working

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import './index.css';
import Logo from "../../public/img/Logo.png"
import * as ReactDOM from "react-dom";
import { Popup } from "@progress/kendo-react-popup";


const Header = () =>{

    const anchor = React.useRef(null);
    const [show, setShow] = React.useState(false);
    React.useEffect(() => {
        setShow(true);
    }, []);

    const onClick = () => {
        setShow(!show);
    };


    return(
        <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <button className="k-button" onClick={onClick} ref={anchor}>
        {show ? "Hide" : "Show"}
      </button>

     
      <Popup anchor={anchor.current} show={show} popupClass={"popup-content"}>
        Popup content.
      </Popup>
	</nav>
)};
export default Header;