On open of React.-bootstrap Navbar dropdown, I want to prevent the body from scrolling

Question

I am using Navbar and Nav from react-bootstrap. When I click on the hamburger, I want to prevent the body from scrolling when the dropdown opens.

I have tried using body-scroll-lock but am having a hard discovering which element to set as targetElement and where to call the showtargetElement and hideTargetElement functions within the Navbar component.

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';


class Header extends Component {
  targetElement = null;

  componentDidMount() {
    this.targetElement = document.querySelector('.menu');
  }

  showTargetElement = () => {
    if('.menu') {
      disableBodyScroll(this.targetElement);
    }
  }

  hideTargetElement = () => {
    enableBodyScroll(this.targetElement);
  }

  componentWillUnmount() {
    clearAllBodyScrollLocks();
  }

  render() {
    return (
      <div className="header">
        <Navbar className="my-navbar" variant="dark" expand="lg">
          <Navbar.Brand className="my-brand" href="#home">Karina Gaulin</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse
            className="dropdown"
            id="basic-navbar-nav"
          >
            <Nav className="mr-auto menu">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="https://www.resume.com/share/karinagaulin" download>Resume</Nav.Link>
              <Nav.Link href="mailto:[email protected]">Connect</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
      );
    }
  }

  export default Header;