MUI Theme provider not working in tsdx package development - material-ui

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>;
};```