Webpack code-splitting when importing dynamic and static mixed

I have a problem with code splitting in webpack 5. I have a monorepo with yarn workspaces. Package foo contains a very large component (Foo). It also contains some small static stuff (theme), which shouldn't be loaded lazy. As I want to have a small main chunk, this should only contain the small theme and nothing else. Foo should later be imported "lazy".

What webpack actually does is import all things in the main chunk, at the moment the index.tsx file contains the theme import and the dynamic import is kind of ignored. There are two chunks, but the second one is just empty.

foo.ts

export { Foo as default } from "foo";

index.tsx

import React, { Suspense} from "react";
import { theme } from "foo";
export const App = () => {
    const Foo = React.lazy(() => import("./foo"));
    return <>
        {theme}
        <Suspense fallback={<div>Loading</div>}>
            <Foo />
        </Suspense>
    </>;
};

Any ideas how to solve this?