How can I use Navbar.Collapse and Navbar.Offcanvas together? - reactjs

Question

My goal is to have a standard topnav on large and greater breakpoints, then on smaller/mobile screens, to use an offcanvas instead while hiding the normal topnav links. However, when I use the two together, the hamburger button triggers both the collapse and the offcanvas, even though the aria-label is set to the offcanvas id (I understand this is just an accessibility label)
How can I tell it to only trigger the offcanvas and just ignore the collapse?
Alternatively, I want the collapse to come in from the side, like the offcanvas does, rather than the top.
Here's my code, as basic as it is:
import React from 'react'
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
const NavLinks = () => (
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
</NavDropdown>
</Nav>
);
const Header = () => {
return (
<Navbar bg="light" expand="lg">
<Container fluid>
<Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
<Navbar.Collapse>
<NavLinks />
</Navbar.Collapse>
<Navbar.Toggle aria-controls="offcanvasNavbar" />
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<NavLinks />
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
);
}
export default Header