My react app won't load the CSS styles even after I already imported it

Question

I'm using UI5 web components with React and I'm trying to give a class with styles on certain component, but the class doesn't take the styles from the CSS files.

Can someone tell my why?

Here is the "./Navbar.css" CSS files:

.nav-menu {
  position: fixed;
  left: -100%;
  transition: 850ms;
  margin-top: 50px;
  width: 10rem;
}

.nav-menu.active {
  left: 0;
  transition: 350ms;
}

And here is the jsx file:

import React, { useState } from "react";
import "./Navbar.css";
import {
  Avatar,
  ShellBar,
  ShellBarItem,
  SideNavigation,
  SideNavigationItem,
  SideNavigationSubItem,
} from "@ui5/webcomponents-react";
import "@ui5/webcomponents-icons/dist/line-chart.js";
import "@ui5/webcomponents-icons/dist/horizontal-bar-chart.js";
import "@ui5/webcomponents-icons/dist/add.js";
import "@ui5/webcomponents-icons/dist/list.js";
import "@ui5/webcomponents-icons/dist/table-view.js";
import { Switch, Route, Redirect } from "react-router-dom";
import { Home } from "./home";
import { Detail } from "./detail";
import { useHistory } from "react-router-dom";

export function MyApp() {
  const history = useHistory();
  const backToHomeClick = () => {
    history.push("./");
  };
  const [sidebar, setSidebar] = useState(false);

  setTimeout(function () {
    //Start the timer
    const sideNavigation = document.querySelector("ui5-side-navigation");
    document
      .querySelector("#startButton")
      .addEventListener("click", (event) => setSidebar(!sidebar));
  }, 1000);

  return (
    <div>
      <ShellBar
        logo={<img src="reactLogo.png" />}
        profile={<Avatar image="profilePictureExample.png" />}
        primaryTitle="My App"
        // onClick={backToHomeClick}
      >
        <ui5-button
          icon="menu"
          slot="startButton"
          id="startButton"
        ></ui5-button>
        <ShellBarItem icon="add" text="Add" />
      </ShellBar>
      <ui5-side-navigation
        // style={{
        //   position: "fixed",
        //   left: 0,
        //   "margin-top": "50px",
        //   width: "10rem",
        // }}
        className={sidebar ? "nav-menu active" : "nav-menu"}
      >
      </ui5-side-navigation>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/detail" component={Detail} />
        <Redirect from="/" to="/home" />
      </Switch>
    </div>
  );
}

As you can see on the ui5-side-navigation, I give a class and give it on click reaction to change the class on click and it's already working. The class changes whenever I click, but the class doesn't take any style from the import "./Navbar.css";.

Does anyone know why?