page is not scrolling to specific div with id in reactjs using react bootstrap navbar

page is not scrolling to specific div with id but its working on desktop but not in mobile devices and tablet

I tried to use react-router hash link but still its not working don’t know why?
need help??

function NavigationBar() {
  return (
    <Navbar collapseOnSelect expand="lg" variant="light" bg="light">
      <Container fluid className="m-2">
        <Navbar.Brand href="/">
          <Logo />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls={`offcanvasNavbar-expand-md`} />
        <Navbar.Offcanvas
          id={`offcanvasNavbar-expand-md}`}
          aria-labelledby={`offcanvasNavbarLabel-expand-md`}
          placement="end"
        >
          <Offcanvas.Header closeButton>
            <Offcanvas.Title
              id={`offcanvasNavbarLabel-expand-md`}
            ></Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <Nav className="justify-content-end align-items-center flex-grow-1 text-center">
              <Nav.Link href="/#about">
                <span>01.</span>About
              </Nav.Link>
              <Nav.Link href="/#work">
                <span>02.</span>Work
              </Nav.Link>
              <Nav.Link className="nav-last" href="/#contact">
                <span>03.</span>Contact
              </Nav.Link>
              <div style={{ width: "100px" }}>
                <Button Padding="0.65rem 1rem">Resume</Button>
              </div>
            </Nav>
          </Offcanvas.Body>
        </Navbar.Offcanvas>
      </Container>
    </Navbar>
  );
}

export default NavigationBar;