Für den Kontext verwende ich die React-Bootstrap-Bibliothek. Immer wenn ich auf das href im Code klicke, wackelt die Seitenleiste eine halbe Sekunde lang, fast so, als würde sie in ihren nicht formatierten Zustand zurückgesetzt und dann in ihre normale Form zurückkehren. Weiß jemand, warum das passiert? Liegt es daran, dass mein Code zu langsam ist? Hier ist mein Sidebar-Code:

import React from "react";
import "../../App.css";
import { Nav, Navbar } from "react-bootstrap";
import ProfileSection from "./ProfileSection";
import ContactBar from "./ContactBar";
import HomeItem from "./SidebarItems/HomeItem";
import BlogItem from "./SidebarItems/BlogItem";
import WorkItem from "./SidebarItems/ProjectItem";
import PhilItem from "./SidebarItems/PhilItem";
import { Container } from "@mui/system";

function Sidebar() {
    return (
        <Navbar expand="lg">
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav defaultActiveKey="/" className="flex-column">
                        <ProfileSection />
                        <HomeItem />
                        <BlogItem />
                        <WorkItem />
                        <PhilItem />
                        <ContactBar />
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
};

export default Sidebar;