React-bootstrap Navbar causing Parent state reset

Question

I am trying to create a Navigation tab for my ReactJs Frontend, but somehow the one using React-bootstrap Navbar is causing my parent state to reset.

I know that routing between the pages could lead to state reset for peer components if using Switch, However this is not the case here, I am using Routes, but still it is resetting the parent state!!!

Just to make sure that it is React-bootstrap Navbar which is causing this problem, I implemented the temporary navbar using Link and it is working without any problem, no case of state reset either for Parent or Child/peer components.

Here is Parent component - App.js

import getWeb3 from '../helper/web3.js';
import '../styles/App.css';
import contractJson from '../helper/contractAbi.json'
// import Participant from "./Participant.js";
import GetParticipant from "./GetParticipant"
import AddParticipant from "./AddParticipant"
// import Product from "./Product.js";
import Products from "./Products.js";
import ChangeProductOwnership from "./ChangeProductOwnership";
import AddProduct from "./AddProduct";
import { BrowserRouter as Router, Routes, Link, Route } from "react-router-dom";
import MyNavbar from "./Navbar.js";
import Home from "../pages/Home.js";
import About from "../pages/About"
import { Button } from "react-bootstrap"
import Navtest from "./navtest.js";



function App() {
  const [rowsData, setRowsData] = useState([]);
  const [product, setProduct] = useState({});
  const [participant, setParticipant] = useState({});
  const [account, setAccount] = useState('');
  const [owner, setOwner] = useState(false);
  // const [web3, setWeb3] = useState();
  const [supplyChain, setSupplychain] = useState();
  const [provenance, setProvenance] = useState([]);
  const isConnected = useRef(false);
 
  //all the function implementation
  .......
  .......
  .......
  .......

  return (
    <div className="App">
      {/* <header className="App-header">
        <h1> Welcome to Supply Chain DApp </h1>
      </header> */}
      <Router basename="/">
        
        {/* Navbar using React-bootstrap */}
        <MyNavbar connectWallet={connectWallet}/>

        {/* Navbar using normal Link */}
        <Navtest connectWallet={connectWallet}/>

        <hr />
        <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/getParticipant'  element={
            <GetParticipant  
              participant={participant}
              handleParticipantChange={handleParticipantChange}
              getParticipant={getParticipant}
            />
          }></Route>
          <Route path='/addParticipant'  element={
            <AddParticipant  
              participant={participant}
              handleParticipantChange={handleParticipantChange}
              addParticipant={addParticipant}
            />
          }></Route>
          <Route path='/products' element={
            <Products
              rowsData={rowsData} 
              getProduct={getProduct}
              provenance={provenance}
              getProvenance={getProvenance}
            />
          }></Route>
          <Route path='/changeProductOwnership' element={
            <ChangeProductOwnership
              owner={owner}
              handleOwnerChange={handleOwnerChange}
              changeOwnership={changeOwnership}
            />
          }></Route>
          <Route path='/addProduct' element={
            <AddProduct
              product={product}
              handleChange={handleChange} 
              addProduct={addProduct}
            />
          }></Route>
          <Route path='/about'  element={<About />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

React-bootstrap Navbar - Mynavbar.js (causing state reset for App component)

import Container from 'react-bootstrap/Container';
import { Nav, Navbar, NavDropdown, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useState } from "react";


const MyNavbar = ({connectWallet}) => {
  const [showParticipant, setShowParticipant] = useState(false);
  const [showProduct, setShowProduct] = useState(false);

  const showParticipantDropdown = (e)=>{
      setShowParticipant(!showParticipant);
  }
  const hideParticipantDropdown = e => {
      setShowParticipant(false);
  }

  const showProductDropdown = (e)=>{
    setShowProduct(!showProduct);
  }
  const hideProductDropdown = e => {
    setShowProduct(false);
  }
  
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="/">Home</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <NavDropdown title="Participants" id="basic-nav-dropdown"
              show={showParticipant}
              onMouseEnter={showParticipantDropdown} 
              onMouseLeave={hideParticipantDropdown}
            >
              <NavDropdown.Item href="/getParticipant">Get Participant Details</NavDropdown.Item>
              <NavDropdown.Item href="/addParticipant">Add New Participant</NavDropdown.Item>
            </NavDropdown>
            <NavDropdown title="Products" id="basic-nav-dropdown"
              show={showProduct}
              onMouseEnter={showProductDropdown} 
              onMouseLeave={hideProductDropdown}
            >
              <NavDropdown.Item href="/products">Products</NavDropdown.Item>
              <NavDropdown.Item href="/changeProductOwnership">Change Product Ownership</NavDropdown.Item>
              <NavDropdown.Item href="/addProduct">Add New Product</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="/about">About</Nav.Link>
          </Nav>
          <Button className="pull-right" onClick={event => connectWallet(event)}>Connect Wallet??</Button>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default MyNavbar;

Navbar using Link - Navtest.js (working fine)

import React from 'react';
import { Button } from 'react-bootstrap';
import { Link } from "react-router-dom";
const Navtest = ({connectWallet}) =>{
  return (
    <div>
        <ul>
        <li>
            <Link to="/">Home</Link>
        </li>
        <li>
            <Link to="/about">About</Link>
        </li>
        <li>
            <Link to="/products">Products</Link>
        </li>
        <li>
            <Link to="/getParticipant">Get Participant</Link>
        </li>
        </ul>
        <Button className="pull-right" onClick={event => connectWallet(event)}>Connect Wallet??</Button>
    </div>
  );
}
export default Navtest;

I dont want any help on creating navbar, but the real problem is the page reload caused due to React-bootstrap Navbar!!! How to avoid this???

Please help!!!