fix: [M3-8052] - Toasts are not consistently dismissible with the 'X'…

… button (linode#11073)

* Fix toasts are not consistently dismissible with the 'x' button

* Added changeset: Toasts are not consistently dismissible with the 'X' button

packages/manager/.changeset/pr-11073-fixed-1728472748252.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Toasts are not consistently dismissible with the 'X' button ([#11073](https://github.com/linode/manager/pull/11073))

packages/manager/src/components/Snackbar/Snackbar.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles';
-import { MaterialDesignContent } from 'notistack';
+import { MaterialDesignContent, closeSnackbar } from 'notistack';
 import { SnackbarProvider } from 'notistack';
 import * as React from 'react';
 
@@ -45,18 +45,11 @@ export const Snackbar = (props: SnackbarProviderProps) => {
    * This pattern is taken from the Notistack docs:
    * https://iamhosseindhv.com/notistack/demos#action-for-all-snackbars
    */
-  const notistackRef: React.Ref<SnackbarProvider> = React.createRef();
-  const onClickDismiss = (key: number | string | undefined) => () => {
-    if (notistackRef.current) {
-      notistackRef.current.closeSnackbar(key);
-    }
-  };
 
   const { children, ...rest } = props;
 
   return (
     <SnackbarProvider
-      ref={notistackRef}
       {...rest}
       Components={{
         default: StyledMaterialDesignContent,
@@ -65,9 +58,9 @@ export const Snackbar = (props: SnackbarProviderProps) => {
         success: StyledMaterialDesignContent,
         warning: StyledMaterialDesignContent,
       }}
-      action={(key) => (
+      action={(snackbarId) => (
         <CloseSnackbar
-          onClick={onClickDismiss(key)}
+          onClick={() => closeSnackbar(snackbarId)}
           text="Dismiss Notification"
         />
       )}