How to have dimmed content on Semantic UI React (NextJS)

Im having a problem on implementing dimmed content on semantic ui react sidebar on nextjs...

this is my layout code:

import React, { useState } from 'react';
import CartSidebar from './CartSidebar';
import Navbar from './Navbar';

const StoreLayout = ({ children }) => {
  const [toggleCart, setToggleCart] = useState(false);
  function toggleMenuCart() {
    setToggleCart(!toggleCart);
  }
  return (
    <>
      <CartSidebar toggleMenu={toggleCart} />
      <Navbar onToggleMenuCart={toggleMenuCart} />
      {children}
    </>
  );
};

export default StoreLayout;

this is my navbar code:

  <nav>
   <div className="borderLeftList">
    <li className="cart">
     <Button
       onClick={props.onToggleMenuCart}
       className="cart-icon empty"
     />
    </li>
   </div>
  </nav>

this is my sidebar code:

import React, { useState } from 'react';
import cn from 'classnames';
import { Icon, Menu } from 'semantic-ui-react';
import Link from 'next/link';

export default function CartSidebar(props) {
  const classes = cn(
    'ui',
    'sidebar',
    'push',
    'right',
    'inverted',
    'menu',
    'vertical',
    'animating',
    { visible: props.toggleMenu }
  );

  return (
    <div className={classes}>
      <Menu.Item as={Link} href="/admin">
        <a>
          <i className="fa fa-home" />
          Dashboard
        </a>
      </Menu.Item>

      <Menu.Item as={Link} href="/admin/orders">
        Second Menu
      </Menu.Item>
      <Menu.Item as={Link} href="/admin/products">
        Third Menu
      </Menu.Item>
    </div>
  );
}

this is my _app.js code:

   <StoreLayout>
     <Component {...pageProps} />
   </StoreLayout>

if you need any more details you can ask on the comment... Thank you so much in advance!!! :)

from How to have dimmed content on Semantic UI React (NextJS)