Component is missing after rerendering - reactjs

Question

I want to create an SQL Editor. For that I need to display to which database I am currently connected to.
If I select some Database from the Dropdown Menu the Dropdown component will disappear completely.
Btw: I use the bootstrap library for Dropdown Menus
Here is what I got so far:
App.js
import Header from "./components/Header";
import Switch from "react-bootstrap/Switch";
import {Route, useParams} from "react-router";
import Navbar from "./components/Navbar";
import {useState} from "react";
import QueryPage from "./components/QueryPage";
import ChangeDB from "./components/essentials/ChangeDB";
function App() {
const [connections, setConnections] = useState([
{
id: 1,
dbname: "db1"
},
{
id: 2,
dbname: "db2"
},
{
id: 3,
dbname: "db3"
}]
);
const [db, setDB] = useState(1);
const onDBChange = ({id}) => {
setDB(() => id)
}
return (
<div className="App">
<Header database={db} connections={connections}/>
<Switch>
<Route exact path={["/", "/home","db/:id" ]}>
<QueryPage />
</Route>
<Route path="/db/:id"><ChangeDB callback={onDBChange} /></Route>
</Switch>
</div>
);
}
export default App;
Header.js
import {Button, Form, FormControl, Nav, Navbar, NavDropdown} from "react-bootstrap";
import "./Header.css";
import { Link } from 'react-router-dom';
function Header({ database , connections}) {
alert(database);
return (
<Navbar bg="light" expand="lg">
<Logo />
<Navbar.Brand href="#home">fnmSQL Client</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
{connections.map(con => {
if(con.id === database) {
return (
<NavDropdown title={con.dbname} id="basic-nav-dropdown">
{connections.length !== 0 ?
connections.filter(id => (database !== id)).map(con => (
<NavDropdown.Item className={"bootstrap-overrides"} href={"#db/" + con.id}>{con.dbname}</NavDropdown.Item>
))
:
<NavDropdown.Item disabled="true">No Database Connections</NavDropdown.Item>
}
</NavDropdown>
)
}
})}
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
);
}
const Logo = () => {
return (
<Link to="./">
<img src={LogoWhite} alt={"ADVA Optical Networking SE"} className={"img"}/>
</Link>
)
}
export default Header;
I havent found another solution to read from HashRouter than putting it in some extra Component:
ChangeDB.js
function ChangeDB({callback}) {
let id = useParams();
callback(id);
return null;
}
export default ChangeDB;

Answer 1

Found a solution. It was because of the strict equality operator.
It seems that either database or con.id is parsed as a string instead of an integer.
I don't know why maybe somebody got an explanation...
Cheers guys