default "css-" class names using MUI styled-components

I'm using Mui's styled components, and i've noticed it injects a class that starts with "css-" and replaces the class name i've given to it in the code

I've tried to follow everything that was suggested here and here but without success (including StyledEngineProvider and CacheProvider with preprend true.

Here is the code and the result i'm getting:

Page.tsx:

import * as S from "./Page.style";
export default function Page(): ReactElement {
  return (
      <S.Container>
      </S.Container>
  );
}

Page.style:

import { styled } from "@mui/material/styles";
export const Container = styled("div")({
  paddingTop: "10%",
  paddingRight: "11%"
}); 

Result

Expected result is the name is something like that includes the word "Container"