Hi 👋 ,

I'd like to render a div on click, and was wondering if someone could give me some guidance as too how I may achieve this?

const [open, setOpen] = React.useState(false);
  function handleClick() {
    if (open) setOpen(false);
    else setOpen(true);

  }

 <div className={`${styles.main} bg-primary sm:h-16 sm:w-screen sm:block lg:hidden`}>
      <div className="flex-row items-center sm:flex lg:hidden">
        <Image src="/flag.png" alt="Flag" width="60" height="60" className="rounded-full lg:w-14 sm:w-10 m-3" />
        <h3 className="font-montserrat text-white text-2xl font-light pr-6">BritSov One</h3>
        <FontAwesomeIcon
          onClick={handleClick}
          icon={faBars}
          className="lg:hidden sm:block text-white m-2  h-8 absolute right-0 mr-5 cursor-pointer hover:text-secondary ease-in duration-200"
        />
      </div>
    </div>

However, I want to render the div inside of the outermost div, and not inside of the div which the icon (which triggers the handleClick() function is declared.