MUI Snackbar Rerenders Again When Store Gets Updated - reactjs

Question

I am using MUI Snackbar in my root component (using STORE) and it appeared more than once because when store updated, the component gets re-rendered again
Snackbar Component:
export type BaseLayoutProps = {
children: ReactNode;
};
const Toast: FC<BaseLayoutProps> = ({ children }) => {
const [state,] = useSetupsStore();
const { toastProps } = state;
const [open, setOpen] = useState(toastProps?.toastState);
useEffect(() => {
if (toastProps) {
setOpen(toastProps.toastState);
}
}, [toastProps]);
const handleClose = (
event: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === "clickaway") {
return;
}
setOpen(false);
};
return (
<>
<Snackbar
theme={unityTheme}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
autoHideDuration={
toastProps?.toastLength ? toastProps.toastLength : 5000
}
variant={toastProps?.variant}
open={open}
onClose={handleClose as any}
message={toastProps?.toastMessage ? toastProps?.toastMessage : "Testing"}
TransitionComponent={(props) => <Slide {...props} direction="up" />}
/>
{children}
</>
)
}
export default Toast;
SnackBar Action:
export const setToast = (toastProps: IToast): StoreActionType => {
if (toastProps?.toastState) {
return { type: ActionTypes.SET_TOAST, payload: toastProps };
}
};
Snackbar Reducer
export const ToastReducer = (
state: IToast,
action: StoreActionType
): IToast => {
switch (action.type) {
case ActionTypes.SET_TOAST:
return {
...state,
toastState: (action.payload as IToast).toastState,
variant: (action.payload as IToast).variant,
toastMessage: (action.payload as IToast).toastMessage,
// toastLength: (action.payload as IToast).toastLength,
}
default:
return state
}
};
Dispatch Code:
dispatch(
setToast({
toastMessage: ToastMessages.Record_Added_Success,
toastState: true,
})
);
I'm 100% sure that it is dispatching only once but when another api get called(store get updated) it again comes to my reducer and root component get re-rendered again due to which it appeared twice. I have also return null in default case in reducer like this:
export const ToastReducer = (
state: IToast,
action: StoreActionType
): IToast => {
switch (action.type) {
case ActionTypes.SET_TOAST:
console.log("inside case",action);
return {
...state,
toastState: (action.payload as IToast).toastState,
variant: (action.payload as IToast).variant,
toastMessage: (action.payload as IToast).toastMessage,
}
default:
return null
}
In above case Snackbar appeared only once for a milisecond & then disappeared again
How to resolve this?