i have a react component that utilizes top level await , but any time i run it throws this error

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
    at C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\dependencies\HarmonyDetectionParserPlugin.js:54:11
    at Hook.eval [as call] (eval at create (C:\Users\HP\Desktop\chat-app\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\HP\Desktop\chat-app\node_modules\tapable\lib\Hook.js:14:14)
    at JavascriptParser.walkAwaitExpression (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:2314:29)
    at JavascriptParser.walkExpression (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:2244:10)
    at JavascriptParser.walkVariableDeclaration (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:2098:33)
    at JavascriptParser.walkStatement (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:1592:10)
    at JavascriptParser.walkStatements (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:1453:9)
    at JavascriptParser.parse (C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\javascript\JavascriptParser.js:3338:9)
    at C:\Users\HP\Desktop\chat-app\node_modules\webpack\lib\NormalModule.js:1082:26

i have tried creating a webpack.config.js file and adding this code

module.exports = {

    experiments: {
      topLevelAwait: true
    },
  };

but same problem