Creating React Tree Shakable library using rollup

Question

I am trying to build a React library for our components using Rollup.

The components are using styled-components and some components are tree shaken, while others are not. I've tracked down the issue and one component which is not tree shaking is calling a recursive function:

const recursiveCloneChildren = (children, textColor) => React.Children.map(children, (child) => {
  if (!React.isValidElement(child)) return child;
  const childProps = { color: textColor };
  childProps.children = recursiveCloneChildren(child.props.children, textColor);
  return React.cloneElement(child, childProps);
});

rollup.config.js

const commonPlugins = [
  babel({
    babelHelpers: 'bundled',
    exclude: ['node_modules/**', '../../node_modules/**']
  }),
  resolve({
    extensions: ['.js', '.jsx'],
  }),
  commonjs(),
  image()
];

const configBase = {
  input: './src/index.js',
  external: ['react', 'react-dom', 'styled-components', 'prop-types'],
  plugins: commonPlugins,
};

export default [
  {
    ...configBase,
    output: [
      {
        file: pkg.module,
        format: 'esm',        
      },
      {
        file: pkg.main,
        format: 'cjs',            
      }
    ],
  }
];