Fixed left sidebar using React and Bootstrap5

Question

I have a React app using RedWoodJS framework. I want a header, a footer and a fixed left sidebar with my content to the right.
Something like that : https://www.codeply.com/p/w5ZxAjmjpo but with a footer and in React.

To add bootstrap to my app I ran yarn add bootstrap and I have this in my package.json :

"dependencies": {
    "bootstrap": "^5.3.0"
  }

The issue is that when I try to add the sidebar to my app, it doesn't work as in codeply example above.
Here is my code :

import { Link, routes } from '@redwoodjs/router'
import React from 'react';
import BlogLayoutHeader from './BlogLayoutHeader';
import BlogLayoutFooter from './BlogLayoutFooter';

const BlogLayout = ({ children }) => {

  return (
    <>
      {/* <-- Début Header --> */}
      <BlogLayoutHeader />
      {/* <-- Fin Header --> */}

      { /* <-- Début Menu Vertical --> */}
        <div className="container-fluid pb-3 flex-grow-1 d-flex flex-column flex-sm-row overflow-auto">
            <div className="row flex-grow-sm-1 flex-grow-0">
                <aside className="col-sm-3 flex-grow-sm-1 flex-shrink-1 flex-grow-0 sticky-top pb-sm-0 pb-3">
                    <div className="bg-light border rounded-3 p-1 h-100 sticky-top">
                        <ul className="nav nav-pills flex-sm-column flex-row mb-auto justify-content-between text-truncate">
                            <li className="nav-item">
                                <Link to={routes.home()} className="nav-link px-2 text-truncate">
                                    <i className="bi bi-house fs-5"></i>
                                    <span className="d-none d-sm-inline">Home</span>
                                </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate">
                                    <i className="bi bi-speedometer fs-5"></i>
                                    <span className="d-none d-sm-inline">Dashboard</span>
                                </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-card-text fs-5"></i>
                                    <span className="d-none d-sm-inline">Orders</span> </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-bricks fs-5"></i>
                                    <span className="d-none d-sm-inline">Products</span> </Link>
                            </li>
                            <li>
                                <Link to={routes.home()} className="nav-link px-2 text-truncate"><i className="bi bi-people fs-5"></i>
                                    <span className="d-none d-sm-inline">Customers</span> </Link>
                            </li>
                        </ul>
                    </div>
                </aside>
                <main className="col overflow-auto h-100">
                    <div className="bg-light border rounded-3 p-3">
                    { /* <-- Début Body --> */}
                        {children}
                        {children}
                        {children}
                    { /* <-- Fin Body --> */}
                    </div>
                </main>
            </div>
        </div>
      { /* <-- Fin Menu Vertical --> */}

      {/* <-- Début Footer --> */}
      <BlogLayoutFooter />
      {/* <-- Fin Footer --> */}
    </>
  )
}

export default BlogLayout

This is my css file :

@import 'bootstrap/dist/css/bootstrap.min.css';

.container [class*='col'] {
  background-color: #efefef;
  background-clip: content-box;
}

.nav-item {
  background-color: #eeeeff;
  background-clip: content-box;
}

.container-fluid .row [class*='col'] {
  background-color: transparent; /* Remove background color from the main content area */
}

.footer {
  background-clip: inherit;
  background-color: #eeeeff;
  border-radius: 0%;
}

* {
  border-radius: 5px;
}

body.thumb {
  transform: scale(0.4);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

main {
  min-height: 80vh;
}

Here how it's look on my screen :

And when I scroll down, the menu on the left doesn't follow as you can see here :