Unable to compile scss in react

Question

I'm unable to use scss file with react.

Folder structure

• src
  • pages
    • home
      • Home.jsx
      • Home.scss

Home.jsx file consists of

import Banner from './Banner';
import Products from './Products';
import './Home.scss';

const Home = () => {
  return (
    <div className='home'>
      <Banner />
      <div className='home__section'>
        <Products />
      </div>
    </div>
  );
};
export default Home;

The error I'm getting in terminal

Compiled with problems:X

ERROR in ./src/pages/home/Home.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/pages/home/Home.scss)

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
Require stack:
- C:\workflow\scaler-ecomm\node_modules\@csstools\postcss-trigonometric-functions\dist\index.cjs
- C:\workflow\scaler-ecomm\node_modules\postcss-preset-env\dist\index.cjs
- C:\workflow\scaler-ecomm\node_modules\postcss-loader\dist\utils.js
- C:\workflow\scaler-ecomm\node_modules\postcss-loader\dist\index.js
- C:\workflow\scaler-ecomm\node_modules\postcss-loader\dist\cjs.js
- C:\workflow\scaler-ecomm\node_modules\loader-runner\lib\loadLoader.js
- C:\workflow\scaler-ecomm\node_modules\loader-runner\lib\LoaderRunner.js
- C:\workflow\scaler-ecomm\node_modules\webpack\lib\NormalModule.js
- C:\workflow\scaler-ecomm\node_modules\webpack-manifest-plugin\dist\index.js
- C:\workflow\scaler-ecomm\node_modules\react-scripts\config\webpack.config.js
- C:\workflow\scaler-ecomm\node_modules\react-scripts\scripts\start.js

(@C:\workflow\scaler-ecomm\src\pages\home\Home.scss)