Created package not grabbing correct components when imported

I've created a package that wraps aws-amplify to be used in many applications. The function of interest is shown below.

import React, { useEffect } from "react";
import Amplify from 'aws-amplify'
import {Authenticator, Image, ThemeProvider, useTheme, View, Heading, defaultDarkModeOverride} from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
import '@aws-amplify/ui-react/styles.css';
import logo from './logo.png';

export function authWrap({children}) {
    const [colorMode, setColorMode] = React.useState('system');
        const theme = {
            name: 'my-theme',
            overrides: [defaultDarkModeOverride],
        };

    Amplify.configure(awsconfig);

    const components = {
        Header() {
            const { tokens } = useTheme();

            return (
                <View textAlign="center" padding={tokens.space.large}>
                    <Image
                        alt="logo"
                        src={logo}
                    />
                </View>
            );
        },
        SignIn: {
            Header() {
                const { tokens } = useTheme();

                return (
                    <Heading
                        padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
                        level={3}
                    >
                        Sign in
                    </Heading>
                );
            },
        },
    }
    useEffect(() => { document.body.style.backgroundColor = 'blue' }, [])
  return (

      <ThemeProvider theme={theme} colorMode={colorMode}>
      <Authenticator components={components}>

          {({ signOut, user}) => (
              <div>
                  {children}
              </div>
          )}
      </Authenticator>
      </ThemeProvider>
  );
}

This works great until I packaged it up and tried importing it to another project. When importing the package through npm, I get a ton of WARN ERESOLVE overriding peer dependency messages. When I try importing the "authWrap" component into another file I get the following error when I start the app.

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /node_modules/authWrapper/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (22:17):

return (
> 22 |                 <View textAlign="center" padding={tokens.space.large}>
     |                 ^
  23 |                     <Image
  24 |                         alt="logo"
  25 |                         src={logo}

I have a feeling this is relating to overriding the peer dependencies and not using the correct Amplify components, but I'm not sure how I fix that.

Below is the tree of my package as well as the contents of the package.json file.

├── aws-exports.js
├── logo.png
├── index.js
└── package.json

{
  "name": "authWrapper",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@aws-amplify/ui-react": "^3.4.1",
    "aws-amplify": "^4.3.32",
    "react": "^18.2.0"
  }
}

Why am I getting this error and how do I fix it?