On clicking Sidebar toggle button takes back to default page in React

I have a simple toggle using hooks to show/hide sidebar. The toggle button works fine as far as showing and hiding sidebar is concerned. When I click on the toggle button it opens the sidebar. And when I click on any of the link from the side bar, the link takes me to the destined page. But now when I click on the toggle button to open the sidebar, instead of staying on the same page it navigates to the default page.

This is the User page

function User() {
const [isOpen, setIsopen] = useState(false);
const ToggleSidebar = () => {
!isOpen ? setIsopen(true) : setIsopen(false);
}
return (
<div className='userheader'>
<div className='usercontainer'>
<div className='signout-btn-position' >
<SignOut />
</div>
<div className={`sidebar ${isOpen ? 'active' : ''}`}>
<div className="sd-header">
<h4 className="mb-0">Sidebar Header</h4>
</div>
<div className="sd-body">
<ul>
<li>{userName ? <div id='username'><FaUserCircle style={{ marginBottom: '4px', marginRight: '4px' }} />{userName}</div> : "Guest User"}</li>
<i><a href='/user/anesthesiatheory' className='link-btn' >Anesthesia</a></i>
<i><a href='/user/anesthesiatheory' className='link-btn' >Integaumentary</a></i>
<i><a href='/user/anesthesiatheory' className='link-btn' >Musculoskeletal</a></i>
<i><a href='/user/anesthesiatheory' className='link-btn' >Cardio & Respiratory</a></i>
</ul>
</div>
</div>
<Link className="btn" onClick={ToggleSidebar}><FaBars /></Link>
<div className={`sidebar-overlay ${isOpen ? 'active' : ''}`} onClick={ToggleSidebar}></div>
</div>
<main>
<Outlet />
</main>
</div>
)
}
export default User

and this is my App.js

const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<Home />} >
<Route index element={<About />} />
<Route path="about" element={<About />} />
<Route path="signup" element={<Signup />} />
<Route path="login" element={<Login />} />
<Route path="guestuser" element={<GuestUser />} />
<Route path="User" element={<User />}>
<Route index element={<UserDefault />} />
<Route path="anesthesiatheory" element={<AnesthesiaTheory />} />
<Route path="anesquizmain01" element={<AnesMain01 />} />
<Route path="anesquiz01" element={<AnesQuiz01 />} />
<Route path="anesquizresult01" element={<AnesResult01 />} />
</Route>
</Route>
)
)
function App() {
return (
<div className="App">
<RouterProvider router={router} />
</div>
);
}
export default App;

What I want is that when I click on the toggle button, I want the sidebar to show without navigating me to default page. Kindly let me know what I am doing wrong. Looking forwards for your valuable suggestions.

here you are using

<Link className="btn" onClick={ToggleSidebar}><FaBars /></Link>

which is redirecting to default page,
use button instead of <Link> to solve this;

<button className="btn" onClick={ToggleSidebar}><FaBars /></button>

also clean your function for ToggleSidebar

from

  const ToggleSidebar = () => {
!isOpen ? setIsopen(true) : setIsopen(false);
}

to

const ToggleSidebar = () => {
setIsopen(!isOpen)
}

Try changing your toggle button from a <Link> element to maybe a <button> element. The <Link> element from react-router-dom acts as an anchor <a> (if you inspect it on your document, it displays as an anchor), and without the href="" property set, it will just redirect you to / or refresh the page. So change that line in the Users page as so:

<button className="btn" onClick={ToggleSidebar}><FaBars /></button>

PS
if you insist on keeping the <Link> tag, then maybe try preventing the default action in your ToggleSidebar function:

  const ToggleSidebar = (event) => {
event.preventDefaul()
!isOpen ? setIsopen(true) : setIsopen(false);
}

then in the <Link> element:

<Link className="btn" onClick={ (event) => ToggleSidebar(event) }><FaBars /></Link>

Note that I haven't tried this on a <Link> or <a> tag in the past, and I am not sure if this will work, but the <button> fix ought to do it.

Hope this was helpful, let me know if you need any more help