How to include third-party packages in my react library package?

Question

I have a React library package configured with typescript and rollup.

This package includes some components based on the company's UI-kit and we customized components of third-party packages like mui and we use them in our projects.

The problem is the types of third-party packages. When I bundle the package and publish it in our private registry, after installing the package in the project, we can't access to extended props of mui components.

In other words, the imported types from the mui package, won't include in build process.

What is wrong and what should I do for my package?

This is how I use types of mui.

import { ButtonProps } from '@mui/material/Button';

export interface IButtonProps extends ButtonProps {}

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2015",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "emitDeclarationOnly": true,
    "sourceMap": true,
    "outDir": "dist",
    "declarationDir": "types",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "baseUrl": "./src",
    "typeRoots": ["node_modules/@types"],
    "resolveJsonModule": true,
    "paths": {
      "assets/*": ["assets/*"]
    },
    "lib": ["dom", "dom.iterable", "esnext"]
  }
}

package.json:

{
  "main": "dist/cjs/bundle.js",
  "module": "dist/esm/bundle.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist",
    "dist/styles"
  ],
  "scripts": {
    "build": "rm -rf dist && rollup -c && sass ./src/styles/index.scss dist/styles/index.css",
    "pre-build": "npm run lint && npm run format && npm run test",
    "dev": "rollup -c -w",
    "test": "NODE_ENV=test jest --detectOpenHandles",
    "test:dev": "NODE_ENV=test jest --watchAll",
    "lint": "eslint src",
    "format": "prettier src -w",
    "storybook": "sass ./src/styles/index.scss public/compiled.css && storybook dev -p 6006",
    "prepare": "husky install"
  },
  "author": "hajalizaa",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
   /// my dependencies
  }
}

rollup.config.mjs

import terser from '@rollup/plugin-terser';
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';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import alias from 'rollup-plugin-alias';
import image from '@rollup/plugin-image';
import copyAssets from 'rollup-plugin-copy-assets';
import copyFiles from 'rollup-plugin-copy';
import json from '@rollup/plugin-json';

import pkg from './package.json' assert { type: 'json' };

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: pkg.main,
        format: 'cjs',
        sourcemap: true
      },
      {
        file: pkg.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        preferRelative: true
      }),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' }),
      postcss({
        modules: true
      }),
      terser(),
      alias(),
      image(),
      copyAssets({
        assets: ['src/assets']
      }),
      copyFiles({
        targets: [{ src: 'src/styles', dest: 'dist' }],
        flatten: true,
        hook: 'writeBundle'
      }),
      json()
    ]
  },
  {
    input: 'dist/esm/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()],
    external: [/\.(css|less|scss)$/]
  }
];