WebPack React - Support for the experimental syntax 'jsx' isn't currently enabled

I've checked every other question and none seem to provide an answer that work for me.

Getting this error when attempting to compile:

  27 |
  28 |   return (
> 29 |     <G x={logoPosition} y={logoPosition}>
     |     ^
  30 |       <Defs>
  31 |         <ClipPath id='clip-logo-background'>
  32 |           <Rect

Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.

This is the code that is causing it:

import * as React from "react";
import WalletConnectProvider from "@walletconnect/react-native-dapp";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function WalletConnector() {
    return (
        <WalletConnectProvider
            bridge="https://bridge.walletconnect.org"
            clientMeta={{
                description: "Connect with WalletConnect",
                url: "https://walletconnect.org",
                icons: ["https://walletconnect.org/walletconnect-logo.png"],
                name: "WalletConnect",
            }}
            redirectUrl={window.location.origin}
            storageOptions={{
                asyncStorage: AsyncStorage as any,
            }}
        >
            <>{/* awesome app here */}</>
        </WalletConnectProvider>
    );
}

This is the package causing it: "@walletconnect/react-native-dapp": "^1.4.1"

I've added .babelrc with the following and problem persists.

    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

I've also added babel.confis.json which didn't help and added a babel section in my package.json with the proper plugins/presets and still no change.