I have a working React app, and am trying to integrate a WalletConnect button on my site. I am following https://docs.walletconnect.com/quick-start/dapps/react-native but have run into this error when running 'npm start'

SyntaxError: C:\...\frontend\node_modules\react-native-qrcode-svg\src\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (29:5):

  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.

I have tried every google link, I can find and no suggestions have solved this issue. I had hopes for this tutorial https://badcodernocookie.com/support-for-the-experimental-syntax-jsx-isnt-currently-enabled/#:~:text=The%20React%20error%20%E2%80%9CSupport%20for,babel%2Fpreset%2Denv%E2%80%9D but no luck.

I dont fully understand what the problem is or how i should go about fixing it?