Rollup when bundling multiple files the output.dir option must be used - reactjs

Question

My Rollup Config worked in Rollup version 2. I try to migrate the rollup package to Version 3.15.0.
Rollup claims that i need the output.dir option instead of using output.file. How can i achieve the same behaviour with using the output.dir option.
Problems with rollupjs configuration
this post doesnt really help me.
rollup.config.js
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
const packageJson = require('./package.json');
export default [
{
external: ['react', 'react-dom'],
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
},
{
external: ['react', 'react-dom'],
input: 'dist/esm/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
plugins: [dts()],
},
];
I tried to split the output object:
{
input: 'src/index.ts',
output:
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
},
{
input: 'src/index.ts',
output:
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
}
Since the "inlineDynamicsInports" is deprecated this is not an option