applying AwayClickListener for header - reactjs

Question

<ClickAwayListener onClickAway={this.handleClose}>
<Navbar color="light" light expand="md" className="navbar-fixed-top">
<Container>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#" id="link-menu-1" className="nav-link" onClick={this.handleLoans}>LOANS {this.state.LOANS ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-2" className="nav-link" caret onClick={this.handleGovtSubsidy}>Govt. Subsidy {this.state.GovtSubsidy ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-3" className="nav-link" caret onClick={this.handleGENINSURANCE}> GEN. INSURANCE {this.state.GENINSURANCE ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-4" className="nav-link" caret onClick={this.handleLIFEINSURANCE}>LIFE INSURANCE {this.state.LIFEINSURANCE ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
<NavItem>
<NavLink href="#" id="link-menu-5" className="nav-link" caret onClick={this.handleELITESERVICES}>ELITE SERVICES {this.state.ELITESERVICES ? <FontAwesomeIcon className="faChevronDown" icon={faChevronUp} /> : <FontAwesomeIcon className="faChevronDown" icon={faChevronDown} />} </NavLink>
</NavItem>
</Nav>
</Container>
</Navbar>
</ClickAwayListener>
<div className="submenu-cover">
{this.state.LOANS ?
<div id="menu-1" className="header-submenu loan-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={LoanMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Retails Loans</div>
<ListGroup>
<ListGroupItem onClick={() => this.gotoPersonalLoanForm()}>Retail Home Loan</ListGroupItem>
<ListGroupItem>Retail LAP (Loan Against Property)</ListGroupItem>
<ListGroupItem>Retail LRD (Lease Rental Discounting)</ListGroupItem>
<ListGroupItem>Retail APF</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">INFRA Loans</div>
<ListGroup>
<ListGroupItem>Construction Finance</ListGroupItem>
<ListGroupItem>Infrastructure Finance</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">SME Loans</div>
<ListGroup>
<ListGroupItem><Link to='/BusinessLoanForm'>SME CC/OD</Link></ListGroupItem>
<ListGroupItem>SME Term Loan</ListGroupItem>
<ListGroupItem>SME Term Loan + CC/OD</ListGroupItem>
<ListGroupItem>SME NFB (Non Fund Base)</ListGroupItem>
<ListGroupItem>SME LAP (Loan Against Property)</ListGroupItem>
<ListGroupItem>SME CGTMSE</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Unsecured Loans</div>
<ListGroup>
<ListGroupItem>Business Loan</ListGroupItem>
<ListGroupItem>Personal Loan</ListGroupItem>
<ListGroupItem>School Fee Funding</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Channel Finance</div>
<ListGroup>
<ListGroupItem>Anchor Lead Bill Discounting</ListGroupItem>
<ListGroupItem>Anchor Lead Input Finance</ListGroupItem>
<ListGroupItem>Vendor Lead Bill Discounting</ListGroupItem>
</ListGroup>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.GovtSubsidy ?
<div id="menu-2" className="header-submenu subsidy-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Interest Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Central Govt. Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Capital Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Electric Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">GST Subsidy</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Others</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col className="img-cover">
<img src={SubsidyMenu} />
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.GENINSURANCE ?
<div id="menu-3" className="header-submenu geninsurance-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={GenInsuranceMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Aviation Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Credit Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Agriculture Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Motor Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Engineering Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Fire Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Health Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Liability Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Marine Cargo</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
<div className="list-wrap">
<div className="list-title">Miscellaneous Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.LIFEINSURANCE ?
<div id="menu-4" className="header-submenu lifeinsurance-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col>
<div className="list-wrap">
<div className="list-title">Term Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">Traditional Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">ULIP Plan Insurance</div>
<div className="list-text">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
<Col className="img-cover">
<img src={LifeInsuranceMenu} />
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ''}
{this.state.ELITESERVICES ?
<div id="menu-5" className="header-submenu eliteservices-submenu">
<PerfectScrollbar component="div" >
<Container fluid={true} >
<Row xs="4" >
<Col className="img-cover">
<img src={EliteServicesMenu} />
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Business Valuations</div>
<ListGroup>
<ListGroupItem>Business Takeover</ListGroupItem>
<ListGroupItem>Purchase Valuation</ListGroupItem>
<ListGroupItem>New Share Issue valuation </ListGroupItem>
<ListGroupItem>Business Synergy Valuation </ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Strategic Financial Advisor</div>
<ListGroup>
<ListGroupItem>Company profile preparation</ListGroupItem>
<ListGroupItem>Outsourced CFO Service</ListGroupItem>
<ListGroupItem>Project Report</ListGroupItem>
<ListGroupItem>Financial Projections</ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap">
<div className="list-title">Compliance Services</div>
<ListGroup>
<ListGroupItem>COP certificate</ListGroupItem>
<ListGroupItem>MOF certificate</ListGroupItem>
<ListGroupItem>Funds Utilisation Certificate</ListGroupItem>
<ListGroupItem>DCCO Certificate </ListGroupItem>
<ListGroupItem>Net Worth Certificate </ListGroupItem>
<ListGroupItem>Statutory Compliance Certificate </ListGroupItem>
<ListGroupItem>Certificate for Subsidy</ListGroupItem>
<ListGroupItem>Stock Statement </ListGroupItem>
</ListGroup>
</div>
</Col>
<Col>
<div className="list-wrap list-wrap-mb">
<div className="list-title">Equity Fund Raise</div>
<ListGroup>
<ListGroupItem>Angle Fund Raise</ListGroupItem>
<ListGroupItem>Seed Fund Raise</ListGroupItem>
<ListGroupItem>VC Fund Raise </ListGroupItem>
<ListGroupItem>PE Fund Raise</ListGroupItem>
</ListGroup>
</div>
<div className="list-wrap">
<div className="list-title">Merger & Acquisition</div>
<div className="list-text set-max">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
<div className="know-more">Know More</div>
</div>
</Col>
</Row>
</Container>
</PerfectScrollbar>
</div>
: ""}
</div>
this is my code and I have already applied the ClickAwayListener but it's not working and I'm not able to solve this error because I'm unable to understand the bug debugger I have applied in so many ways but still couldn't get any success. Thank you so much in advance for helping me.
In this code, the listing of the header menu is in Navbar and when we click on a particular header menu the submenu of that menu will open.
And when I click away from that menu the submenu section will be closed.
just because of a lack of experience in Reactjs I'm unable to solve it.
It'll be great for me if anyone can give me the solution to this.