How do I fix with Next JS and Antd Design Styling not working?

Question

Whenever I try to style Antd Design component ( Layout, Sider and so on ) but it doesn't seems to be working. Therefore there won't be any changes on them. But it works fine on other HTML elements like div, h1, p tags.

Here's my code:

.sidbar{
    flex: 1;
    background-color: red;
    border-right: 0.5px solid rgb(218, 217, 217);
    min-height: 100vh;
    background-color: white;  
}

import styles from "../styles/Sidebar.module.scss";
import React from "react";
import { Layout, Menu } from "antd";
const { Header, Content, Footer, Sider } = Layout;
import {
  HomeOutlined,
  DashboardOutlined,
  TeamOutlined,
} from "@ant-design/icons";
import Link from "next/link";

const Sidebar = () => {
  return (
    <div>
      <Layout className={styles.sidebar}>
        <Header>header</Header>
        <Layout>
          <Sider>left sidebar</Sider>
          <Content>main content</Content>
          <Sider>right sidebar</Sider>
        </Layout>
        <Footer>footer</Footer>
      </Layout>
    </div>
  );
};

export default Sidebar;