React Hamburger Menu - reactjs

Question

I am new to react and still just grasping some of the concepts. I am trying to add a hamburger menu component, which adds fine, but I am confused about how to add a menu to the hamburger component itself.
Here is the code
render() {
const [isOpen, setOpen] = useState(false);
const {
installationsSection,
selectedInstallationIndex,
} = this.state;
return (
<div className="apollo-premier">
<Helmet>
<title>Apollo Premier</title>
<meta property="og:title" content="Apollo Premier" />
</Helmet>
{this.renderHeader(true)}
{this.renderHeader(false)}
<div className="content">
<div className="hero-container">
<img className="background" src={PremierHeroBackgroundAnimated} />
<img className="paint-background" src={PremierHeroPaint} />
<div className="text">
<p className="large">Breakthrough technology meets high-end design</p>
<div className="divider"><div></div></div>
<p>Apollo Premier is an elevated patent protected digital display for those who want to introduce the finest digital art into their home or business.</p>
<p>Apollo Premier houses your digital motion art collection to bring digital into a physical environment to enjoy your digital library.</p>
<p>A superior display experience, completely customized to each space and integrates seamlessly into smart home technology.</p>
</div>
</div>
<div className="section flex center the-process-section">
<div className="left">
<h2>The Process</h2>
<p>This customization process gives you complete control of the layout, functionality, and design of your Premier Display inside your space. We take you through the concept and implementation of each build meticulously from start to finish.</p>
<p>An array of material and layout options are available to select from to create an authentic and unique installation each and every time. The exclusive finishing touches, including lighting, music, power, and framing, can be customized for each setting.</p>
<div className="cta yellow">Inquire within</div>
</div>
<div className="right">
{/* <div className="the-process-steps">
<div className="the-process-step">
<img src="http://placehold.it/160x160" />
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div className="the-process-step">
<img src="http://placehold.it/160x160" />
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div className="the-process-step">
<img src="http://placehold.it/160x160" />
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div className="the-process-step">
<img src="http://placehold.it/160x160" />
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div> */}
<div className="the-process-placeholders">
<img src={PremierProcessPlaceholder1} />
<img src={PremierProcessPlaceholder2} />
</div>
</div>
</div>
<section className="section center installations">
{installationsSection && installationsSection.installations && <React.Fragment>
<h2>Customize</h2>
<p>Apollo Premier displays are completely bespoke and designed by in-house teams of architects for the most discerning homes and spaces.</p>
<Carousel
className="installations-carousel"
showThumbs={false}
showStatus={false}
showArrows={false}
swipeable={true}
selectedItem={selectedInstallationIndex}
onChange={this.updateSelectedInstallation}
>
{installationsSection.installations.map((installation, i) => <PremierInstallationItem key={i} installation={installation} />)}
</Carousel>
</React.Fragment>}
</section>
<div className="hero-container premier-plus">
<img className="background" src={PremierPlusBackground} />
<img className="paint-background" src={PremierPlusPaint} />
<div className="text">
<img src={ApolloPremierPlusLogo} alt="Apollo Premier Plus" />
<p className="inverted">Apollo Premier+ is the art lover's membership you have been waiting for, packed with exclusive access to events, fairs, artists and their work. A community with like minded individuals passionate about contemporary art.</p>
<div className="cta blue">Inquire for more information</div>
</div>
</div>
<div className="section center membership-benefits">
<h2>Membership<br />Benefits</h2>
<div className="divider"><div></div></div>
<div className="benefits-container">
<div>
<p className="title">Community</p>
<p className="sub-title">Events</p>
<p className="text">Members will enjoy access to prestigious events and member only programming</p>
</div>
<div>
<p className="title">Access</p>
<p className="sub-title">Unleashed Buying Power</p>
<p className="text">Members will have a 24 hour preview window of new digital NFT work before anyone else. </p>
</div>
<div>
<p className="title">Connection</p>
<p className="sub-title">Networking</p>
<p className="text">Meet like minded individuals that can lead to life-changing collaborations and relationships.</p>
</div>
</div>
</div>
</div>
<div className="intro-footer">
<div className="logo">
<img src={ApolloLogo} />
</div>
<p></p>
<p></p>
<p>
215 W. Huron Suite 1
<br />
Chicago, IL 60554
</p>
</div>
{installationsSection && installationsSection.installations && installationsSection.installations.map((installation, i) => <InstallationItemPopup key={i} installation={installation} />)}
</div>
);
}
renderHeader = (fixed: boolean) => {
return (
<div className={'header' + (fixed ? ' fixed' : '')}>
<div className="pencil-banner">
<div className="apollo-logo"><img src={ApolloLogoBlack} alt="Apollo" /></div>
<div className="concierge">
{/* <img src={IconSupportBlack} /> <span>Concierge</span> */}
</div>
<div className="contact">
<span>[phone]</span> <span className="divider">|</span> Contact
</div>
</div>
<div className="nav">
<div className="logo">
<img src={ApolloPremierLogo} alt="Apollo Premier" />
</div>
<div className="nav-links">
<Hamburger toggled={isOpen} toggle={setOpen}>
Apollo App
Apollo Art
Apollo Premier
</Hamburger>
<div>
</div>
</div>
</div>
</div>
);
}
}
Hamburger is obviously where the menu is created.
But I am unable to get a drop down of the links:

Answer 1

I get a hooks error when I try the above code
render() {
const [isOpen, setOpen] = useState(false);
^ Since you're defining a render() method, it means you have a class component. Hooks (like useState) are supposed to be used from within function components.
You don't need hooks in class component, you can simply use this.setState() method to update state and life cycle methods in place of other hooks.