MUI Theme provider not working in tsdx package development

Question

Tring to create a custom button component with mui button using theme provider. Its working with react app and story book when using it directly. in my case, I need to publish custom button component as npm package and I'm using tsdx for developing and publishing it. once package has published I was was trying to consume it my another react application button getting rendered but custom themes not getting applied which we provided during package development.

button package

import Button from '@mui/material/Button';
// import { deepmerge } from '@mui/utils';
import {btnProperties} from './properties'

import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';

export interface Props {
    /** Name of the button will be displayed */
    label : string;
    /** optional needs to be string --test*/
    variant? : string;
     /** Custom styles object */
    theme? : object

}


const themeProperties = (inputTokenz : any) =>{

let combinedProps = { ...btnProperties , ...inputTokenz}
console.log("combinedProps",combinedProps)
    return createTheme({
        components: {
            MuiButton: {
                styleOverrides: {
                    root: {
                        fontSize: combinedProps.btnFontSize,
                        color: combinedProps.btnColor,
                        backgroundColor: combinedProps.btnBackgroundColor,
                        fontWeight: combinedProps.btnfontWeight,
                        textTransform : 'none',
                        '&:hover' : {
                            backgroundColor: combinedProps.btnHover,

                        }
    
                    },
                },
            },
        },
    });
}
/**
 * A custom MUI button component.
 */
export const EnbdButton: FC<Props> = ({ label,theme }) => {

  return <div> 
        
      {/* <Button variant='contained'>{label}</Button> */}
           
            <StyledEngineProvider injectFirst>
                {/* <ThemeProvider theme={deepmerge(baseTheme, getDeepMergeObj(theme))}> */}
                <ThemeProvider theme={themeProperties(theme)}>
                    <Button variant="contained">{label}</Button>
                </ThemeProvider>
            </StyledEngineProvider>
      </div>;
};```