What's causing my React sidebar to jitter whenever a new page loads?

Question

For context, I'm using the React-Bootstrap library. Whenever I click on the href in the code, the sidebar jitters for half a second, almost like it resets to its unstyled state and then returns to its normal form. Does anyone know why this is happening? Is it because my code is too slow? Here is my 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;

Answer 1

Your code works fine on my device.. Must be some internet or device issue. I also checked your code and there is nothing wrong with your code. Once deployed there is no need to worry about it working properly.