Navbar: mobile version not working on load time with react-router-dom

[tishoyanchev]

Detailed description of how to reproduce the problem

 <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar/>}/>
      </Routes>
    </BrowserRouter>

When react-router-dom is used, if the screen size is small on page load, the mobile version is not working on the Navbar, which causes errors.
The right-side items are not hidden inside the mobile sidebar on page load, and thus when expanding the screen, there is an error because an attempt is made to query the mobile items.
Cannot read properties of null (reading 'setAttribute') .. caused by searchBarRight.setAttribute('slot', 'search-bar-left');

Upload a screenshot

Describe the development framework

React

Expected behavior

Nav-items should be hidden on mobile resolution

Additional information

No response