Typescript Clicking X doesn t successfully close my popup banner

Question

I've created a popup banner with the following code (sorry if the format is off)

 //this is in folder Banner.tsx

  import React, {useCallback} from "react";
  type Properties = {
        close: () => void;
       text: string;

   const Banner: React.FC<Properties> = ({close, text}) => {
   const onClick = useCallback(() => {
                   close();},
                   [close, text]);
   return (
      <div className = "BannerBox">
           <div className = "banner">
          <span className = "popup"> {onClick}{close}[x]
          </span>
          {text}
          </div>
     </div>
     );
     };
   export default Banner;


//this is App.tsx

import Banner from "./Components/Banner";
function App(): JSX.Element {

const [isOpen, setIsOpen]=useState(false);
      const toggleBanner = () => {
      SetIsOpen(!isOpen);
};

return (
    <div>
      <input type = "button"
          value = "popup"
          onClick={toggleBanner}/>
          <p>hi</p>
          {isOpen && <Banner text = {"hello"} close={function (): void { throw new Error("Function not implemented.");
          } }/>}
    </div>
export default App;


 //this is my Banner.css file (let me know if you need the full code but this is some of it)

.BannerBox{
 position: fixed;
 background: blue;
 width:50%;

 }
 
 .banner{
 position: relative;
 width: 100%;
 }

 .popup{
 content: 'x';
 position: fixed;
 background: green;
 
 }

the code compiles just fine, I'm not getting any errors but the problem is that when the banner pop-ups, I can't close it by clicking 'X' i have to refresh the page in order to close the banner and I'm not sure how to fix that.