removes react motion from undo component (#39787)

frontend/src/metabase/containers/UndoListing.jsx

 import PropTypes from "prop-types";
-import { Motion, spring } from "react-motion";
+import { useState } from "react";
+import { useMount } from "react-use";
 import { t } from "ttag";
 
 import BodyComponent from "metabase/components/BodyComponent";
 import { Ellipsified } from "metabase/core/components/Ellipsified";
-import { isReducedMotionPreferred } from "metabase/lib/dom";
 import { capitalize, inflect } from "metabase/lib/formatting";
 import { useSelector, useDispatch } from "metabase/lib/redux";
 import { dismissUndo, performUndo } from "metabase/redux/undo";
+import { Transition } from "metabase/ui";
 
 import {
   CardContent,
@@ -51,19 +52,34 @@ UndoToast.propTypes = {
   onDismiss: PropTypes.func.isRequired,
 };
 
+const slideIn = {
+  in: { opacity: 1, transform: "translateY(0)" },
+  out: { opacity: 0, transform: "translateY(100px)" },
+  common: { transformOrigin: "top" },
+  transitionProperty: "transform, opacity",
+};
+
 function UndoToast({ undo, onUndo, onDismiss }) {
+  const [mounted, setMounted] = useState(false);
+
+  useMount(() => {
+    setMounted(true);
+  });
+
   return (
-    <Motion
-      defaultStyle={{ opacity: 0, translateY: 100 }}
-      style={{ opacity: spring(1), translateY: spring(0) }}
+    <Transition
+      mounted={mounted}
+      transition={slideIn}
+      duration={300}
+      timingFunction="ease"
     >
-      {({ translateY }) => (
+      {styles => (
         <ToastCard
           dark
           data-testid="toast-undo"
-          translateY={isReducedMotionPreferred() ? 0 : translateY}
           color={undo.toastColor}
           role="status"
+          style={styles}
         >
           <CardContent>
             <CardContentSide maw="75ch">
@@ -85,7 +101,7 @@ function UndoToast({ undo, onUndo, onDismiss }) {
           </CardContent>
         </ToastCard>
       )}
-    </Motion>
+    </Transition>
   );
 }
 function UndoListingInner() {