React re-exporting components failed

I am working with a React project where each component’s files are contained in their own directory. I have a component.jsx file and an index.js file that re-exports the component’s default export. This works as expected. I would like to simplify my import statements by re-exporting all components up directory level from the main components folder. See below for an example of my current project foloder structure.

src
--components
----Alert
------Alert.jsx
------index.js
----LoginCard
------LoginCard.jsx
------index.js
--index.js

Alert/Alert.jsx

export default function Alert(props) {
    // omitted for brevity - the component itself works fine
    return <Alert />
}

Alert/index.js

export { default } from './Alert';

At this point, imports work as expected in the LoginCard component.
LoginCard.jsx

import { UserContext } from '@contexts';
import Alert from '@components/Alert';

export default function LoginCard(props) {
    // omitted for brevity. Again, component works as expected
    return <LoginCard />

In order to achieve my desired end result of simplifying import calls, I created components/index.js:

components/index.js

export { default as Alert } from './Alert';

Which I then attempt to import as:
LoginCard.jsx

import { Alert } from '@components'

When attempting to import from component/index.js as import { Alert} from '@components' I receive an exception that states “cannot read default property of undefined”. What makes this strange is that I import/export my pages and contexts in exactly the same manner and they work as expected. I originally thought that this implied an issue with my components directory alias, but the alias is working as I can import just fine from @components/Alert, just not from @components

Have a missed something simple, or am I hitting a bug? Thanks.