CSS inserted in document head and not iframe head

I am using the following main packages:

1. react-frame-component package to load my app in an iframe
2. antd for UI components
3. webpack for the build

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = () => {
  return {
    entry: "./src/index.js",
    mode: "development",
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "script.js",
    },
    devServer: {
      contentBase: path.join(__dirname, "build"),
      historyApiFallback: true,
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: ["babel-loader"],
        },
        {
          test: /\.scss$/,
          use: ["style-loader", "css-loader", "sass-loader"],
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
      }),
    ],
  };
};

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import Frame from "react-frame-component";
import App from "./App";

ReactDOM.render(
  <Frame>
    <AppWithAntDesign />
  </Frame>,
  document.getElementById("root")
);

src/App.js

import React from "react";
import "antd/dist/antd.css";
import { Card, Button } from "antd";
import "./App.scss";

const App = () => (
  <Card>
    <Button>Antd</Button>
    <button className="custom-button">Normal CSS</button>
  </Card>
);

export default App;

src/App.scss

.custom-button {
  background: black;
  color: white;
}

When the app is rendered without the Frame, all the CSS referenced inside the codebase work fine, but once it's rendered as part of the Frame the antd CSS and local CSS do no load inside iframe's head.

PS: I do not want to know the hack to copy CSS from parent document and paste it inside iframe head.