RollupJS: [Component] is undefined error in jsx/tsx components

Question

I have a simple react + typescript project that is half typescript, another written in commonJS that is using rollup for bundling. My rollup.config is like below

import resolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import typescript from '@rollup/plugin-typescript'
import commonjs from '@rollup/plugin-commonjs'

export default {
    input: 'src/index.js',
    output: {
        file: 'lib/bundle.js',
        format: 'umd',
        name: '[name]',
    },
    plugins: [
        resolve(),
        postcss({ plugins: [], writeDefinitions: true, modules: true }),
        typescript({ outputToFilesystem: true, jsx: 'preserve' }),
        babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
        commonjs(),
    ],
    external: [
        'react',
        'react-sizeme',
        'lodash',
    ],
}

Things were working fine, untill I decided to add few jsx/tsx components. I started getting plugin error after using jsx/tsx. I learnt that @rollup/plugin-typescript can't reserve jsx/tsx from here . I updated my config and added the acorn-jsxplugin .

import resolve from '@rollup/plugin-node-resolve'
    import babel from '@rollup/plugin-babel'
    import postcss from 'rollup-plugin-postcss'
    import typescript from '@rollup/plugin-typescript'
    import commonjs from '@rollup/plugin-commonjs'
    import jsx from 'acorn-jsx'

    export default {
        input: 'src/index.js',
        output: {
            file: 'lib/bundle.js',
            format: 'umd',
            name: '[name]',
        },
        acornInjectPlugins: [jsx()],
        plugins: [
            resolve(),
            postcss({ plugins: [], writeDefinitions: true, modules: true }),
            typescript({ outputToFilesystem: true, jsx: 'preserve' }),
            babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
            commonjs(),
        ],
        external: [
            'react',
            'react-sizeme',
            'lodash',
        ],
    }

While It resolved the error, My final build doesn't include the imported jsxt/tsx components. example

const ExternalComp: React.FC<{ name: string }> = ({ name: string }) => React.reactElement<void> => {
    return (<div> I am external {name}</div>
}

const MyFunction: React.FC<{ name: string }> = ({ name: string}) => React.reactElement<void> => {
  return(
    <ExternalComp name={name} />
  )
}

When I bundle my build above, ExternalComp seems to be omitted all the time and is throwing undefined error all the time in my app. acorn-jsx seem to be omitting the components outside the main component from the final bundle/build. Please what causes this and how do I address it ? Any help will be appreciated.

Update

Adding console.log([ExternalComp]) inside MyFunction forces RollUp to bundle with ExternalComp . Just rendering it <ExternalComp /> doesn't.