Dynamic Import / Code Splitting inside a Library that is imported inside of a react project (ChunkLoadError)

I have a component library that contains an icon component. This icon component is a wrapper for these icons. You pass a string into the icon component to choose which icon will be displayed. The component library imports all of the icons from @carbon/icons-react. This is so whoever is using the icon component in a different project can just pass the string to the component and the icon is available without having to add the import for that specific icon into the library whenever someone wants to use one that isn't already being used. The problem is that the bundle size is very large because of all of the icons. To try and remedy this is attempted to implement dynamic imports in the library

const Icon = ({icon}) => {
  const Component = React.lazy(() => import(`@carbon/icons-react/next/${icon})
  return (
         <Suspense>
           <Component />
         </Suspense>
         )
      }

The above code isn't exact to what I have since I didn't copy and paste but it works. I can run storybook and see that it is successfully dynamically importing the icon and then rendering it. The problem occurs when I try to import the Icon component in another project and use it. I get a

ChunkLoadError: Loading chunk 177 failed.
Missing: https://project.localhost/177.library.js

I can see the dynamically generated chunks for the icon components inside of the source tab in chrome. They are at the same location that the error says they are not.

Here is my output in webpack.config for the library

output: {
  path: library/lib
  filename: library.js
  library: library
  libraryTarget: umd
  umdNamedDefine: true
  publicPath: '/'

According to this post, it seems like code splitting/ dynamic imports do not work inside libraries. This is probably the cause of the error. I am curious if a way to do this been added since 2020 or should I take a different approach to reduce the bundle size.