React.CSSProperties shows parsing error when used to insert css variables into App

I am trying to use these variables in my scss file so that I can change my theme in the future directly from here. But it shows me parsing error, which was not there in the previous projects.

This is a React CRA project with typescript.

//App.tsx

import React from "react";
import "./App.scss";

const lightTheme = {
    "--primary": "#27AE60",
    "--text-primary": "#000000",
    "--background-primary": "#ffffff",
    "--background-secindary": "#fafafa",
} as React.CSSProperties;

const App = () => {
    return <div className="App" style={lightTheme}></div>;
};

export default App;

I can now use them as -

//App.scss

body {
color: var(--primary);
}

My package.json file -

{
    "name": "management-portal",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "sass": "^1.32.5",
        "typescript": "^4.0.3",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

But it is throwing me this error ...

  Line 9:3:  Parsing error: Unexpected token, expected ";"    

   7 |  "--background-primary": "#ffffff",
   8 |  "--background-secindary": "#fafafa",
>  9 | } as React.CSSProperties;
     |   ^
  10 | 
  11 | const App = () => {
  12 |  return <div className="App" style={lightTheme}></div>;

Although I expect the following result - Expected result in browser

I have got a workaround for the error, which works fine. But I am not able to find my mistake in my earlier code. Here it is -

import React from "react";
import "./App.scss";

const lightTheme: any = {
    "--primary": "#27AE60",
    "--text-primary": "#000000",
    "--background-primary": "#ffffff",
    "--background-secindary": "#fafafa",
};

const App = () => {
    return <div className="App" style={lightTheme}></div>;
};

export default App;