Edit: CodeSandbox link: https://codesandbox.io/s/strange-dawn-q9zow

I'm creating a React app that I want to have a collapsible sidebar. I'm using the transition collapse utility from React-Bootstrap. Since this is for a sidebar, I'm using dimension="width" . I've tried adding a transition to a few elements including the .width class as it says in the React-Bootstrap documentation, but the animation is still really choppy/not smooth. Am I missing a class, or is there something additional I need to do with the CSS?
JSX:

import React, {useState} from 'react';
import Button from 'react-bootstrap/Button';
import Collapse from 'react-bootstrap/Collapse';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
  useHistory,
  useLocation
} from "react-router-dom";
import '../../custom_styles/sidebar.css';

function Visualizer() {
    const [open, setOpen] = useState(false);
    return (
        <Router>
            <div className="container-fluid h-100 p-0">
                <div className="row h-100 no-gutters">
                <Collapse id="sidebar" dimension="width" in={open}>
                    <div className="col-4 bg-dark text-white" id="example-collapse-text">
                        <h2>Palette</h2>
                    </div>
                </Collapse>
                    <div className="col-8">
                        <Button
                        className="float-left ml-n1"
                        variant="dark"
                        onClick={() => setOpen(!open)}
                        aria-controls="example-collapse-text"
                        aria-expanded={open}
                        >
                        <div id="collapse-btn-text">Toggle Sidebar</div>
                        </Button>
                    </div>
                </div>
            </div>
        </Router>
    )
}

export default Visualizer;

CSS:

#sidebar {
    transition: width 2s;
}

.width {
    transition: width 2s;
}

.show {
    transition: width 2s;
}