mui upgrade

interface/src/components/loading/FormLoader.tsx

@@ -32,8 +32,16 @@ const FormLoaderComponent = ({ errorMessage, onRetry }: FormLoaderProps) => {
     );
   }
   return (
-    <Box m={2} py={2} display="flex" alignItems="center" flexDirection="column">
-      <Box py={2}>
+    <Box
+      sx={{
+        m: 2,
+        py: 2,
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }}
+    >
+      <Box sx={{ p: 2 }}>
         <CircularProgress size={100} />
       </Box>
     </Box>

interface/src/components/loading/LoadingSpinner.tsx

@@ -15,12 +15,14 @@ const circularProgressStyles: SxProps<Theme> = (theme: Theme) => ({
 const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
   return (
     <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      padding={2}
-      height={height}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        padding: 2,
+        height
+      }}
     >
       <CircularProgress sx={circularProgressStyles} size={100} />
     </Box>