Getting Support for the experimental syntax 'jsx' isn't currently enabled in my index file even after adding babel and adding it to packages

I've created a react application, in that I added router-dom, then I made the changes according to the document provided by router-router-dom, but then i ended up getting

    index.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:5):
     8 | const root = ReactDOM.createRoot(document.getElementById('root'));
       9 | root.render(
    > 10 |     <React.StrictMode>
         |     ^
      11 |         <BrowserRouter>
      12 |             <App />
      13 |         </BrowserRouter>

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

Now I installed these dependencies and added it to my packages.json file and created a babel.config.json inside the root, but I'm still getting the above error when I compile, any help would be appreciated

I had created this project using visual studio 2022 and when I switched to npm it worked fine, I'm not sure what the problem was but I'm assuming that the project setup has some issues on visual studio