How to add content security policy on react app

Question

How to add security layer that with meta tags to my react application correctly, I have tried to do it with the npm csp-html-webpack-plugin but I get as a result that the app is not displayed in the browser and a list of errors by content security policy violation

most of the errors have to do with style-src since I am using the material UI package

And others with read property 'cssRules' of null

I am using pm2 to launch my application

my build looks like this

"build": "env-cmd -e production react-app-rewired build"

my meta header looks like this

<meta http-equiv="Content-Security-Policy" content="" />

my config-overrides.js looks like this

const { override } = require("customize-cra");
const cspHtmlWebpackPlugin = require("csp-html-webpack-plugin");

const cspConfigPolicy = {
  "style-src": ["'self'", "'unsafe-inline'"],
  "default-src": ["'self'"],
  "base-uri": "'self'",
  "object-src": "'none'",
  "script-src": ["'unsafe-inline'", "'https://unpkg.com'"]
};

function addCspHtmlWebpackPlugin(config) {
  if (process.env.NODE_ENV === "production") {
    config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
  }

  return config;
}

module.exports = {
  webpack: override(addCspHtmlWebpackPlugin)
};

and my .env look like this

"production": {
"GENERATE_SOURCEMAP": false,
"INLINE_RUNTIME_CHUNK": false,
"REACT_APP_PUBLIC_URL": "",
"REACT_APP_API_URL": "localhost",
"REACT_APP_API_VERSION": "api/v1",
}

Could someone show an example of how to do it please