🐞 fix([BUG] Mapping key has multiple children #128: Solution: Refacto…

…r use-snack.tsx to import React and update AnimatePresence usage):

src/hook/use-snack/use-snack.tsx

@@ -1,12 +1,11 @@
-import { Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { m, AnimatePresence } from 'framer-motion'
 import { SnackbarProvider as NotistackProvider, useSnackbar } from 'notistack'
 import { Slide, IconButton } from '@mui/material'
 import { useIcon, ICON_NAME } from 'hook'
 import { ICON_WEB_NAME } from 'config'
 import { KEY, COLOR as COLOR_CONSTANT } from 'constant'
 import { SSnackContent, SSnackIconMDiv } from './style'
-import { Iconify } from 'component/iconify'
 
 interface SnackProviderProps {
   children: React.ReactNode
@@ -47,7 +46,11 @@ export default function SnackProvider({ children }: SnackProviderProps) {
             <Icon icon={closeSrc} />
           </IconButton>
         )}>
-        <AnimatePresence>{children}</AnimatePresence>
+        <AnimatePresence>
+          {React.Children.map(children, (child, index) => (
+            <m.div key={index}>{child}</m.div>
+          ))}
+        </AnimatePresence>
       </NotistackProvider>
     </Fragment>
   )