Fix Element type is invalid in n FileAttachment file

Author: rouftom

src/FileAttachment.tsx

@@ -35,60 +35,62 @@ function FileAttachment(props: FileAttachmentProps) {
   }
 
   return (
-    <Box
-      sx={{
-        mb: 0,
-        display: 'flex',
-        alignItems: 'center',
-        '&:nth-of-type(even)': {
-          backgroundColor: theme.palette.action.hover
-        }
-      }}
-    >
-      <Box sx={{ display: 'flex', flexGrow: 1, alignItems: 'center' }}>
-        <Avatar
-          alt=""
-          src={file.path}
-          ref={avatarRef}
-          variant="rounded"
-          sx={{
-            m: .5,
-            width: 32,
-            height: 32,
-            display: 'flex',
-            background: 'transparent'
-          }}
-        >
-          {icon}
-        </Avatar>
-        <Typography
-          component="div"
-          sx={{ display: 'inline-grid', alignItems: 'center' }}
-        >
-          <Typography variant="body2" noWrap>
-            {file.name}
-          </Typography>
-          <Typography variant="caption" noWrap>
-            <React.Fragment>
+    <>
+      <Box
+        sx={{
+          mb: 0,
+          display: 'flex',
+          alignItems: 'center',
+          '&:nth-of-type(even)': {
+            backgroundColor: theme.palette.action.hover
+          }
+        }}
+      >
+        <Box sx={{ display: 'flex', flexGrow: 1, alignItems: 'center' }}>
+          <Avatar
+            alt=""
+            src={file.path}
+            ref={avatarRef}
+            variant="rounded"
+            sx={{
+              m: .5,
+              width: 32,
+              height: 32,
+              display: 'flex',
+              background: 'transparent'
+            }}
+          >
+            {icon}
+          </Avatar>
+          <Typography
+            component="div"
+            sx={{ display: 'inline-grid', alignItems: 'center' }}
+          >
+            <Typography variant="body2" noWrap>
+              {file.name}
+            </Typography>
+            <Typography variant="caption" noWrap>
+              <React.Fragment>
 
-              <b
-                // eslint-disable-next-line
-                // @ts-ignore
-              >{size}</b> | <b>{file?.extension ? file.extension.toLowerCase() : ''}</b>
-            </React.Fragment>
+                <b
+                  // eslint-disable-next-line
+                  // @ts-ignore
+                >{size}</b> | <b>{file?.extension ? file.extension.toLowerCase() : ''}</b>
+              </React.Fragment>
+            </Typography>
           </Typography>
+        </Box>
+
+        <Typography component="div" sx={{ mr: -.5, textAlign: 'right' }}>
+          <IconButton
+            disabled={disabled}
+            onClick={(event): void => handleRemoveFile(event, index)}
+          >
+            <CloseIcon />
+          </IconButton>
         </Typography>
       </Box>
-
-      <Typography component="div" sx={{ mr: -.5, textAlign: 'right' }}>
-        <IconButton
-          disabled={disabled}
-          onClick={(event): void => handleRemoveFile(event, index)}
-        >
-          <CloseIcon />
-        </IconButton>
-      </Typography>
-    </Box>
+    </>
   )
 }
 

src/FileUpload.tsx

@@ -17,13 +17,13 @@ import {
   useMediaQuery,
   TypographyProps, PaperProps,
 } from '@mui/material'
-// eslint-disable-next-line
-// @ts-ignore
-import FileAttachment from "./FileAttachment.tsx"
 import { useTheme, styled } from '@mui/material/styles'
 // eslint-disable-next-line
 // @ts-ignore
 import uploadImage from '../public/Files And Folder_Two Color_2.svg'
+// eslint-disable-next-line
+// @ts-ignore
+import FileAttachment from "./FileAttachment.tsx"
 import {
   ExtendedFileProps,
   FileActionProps,
@@ -639,7 +639,7 @@ FileUpload.defaultProps = {
   containerProps: {},
   ContainerProps: {},
   LabelsGridProps: {},
-  PlaceholderGridProps: '',
+  PlaceholderGridProps: {},
 } as Partial<PaperProps>
 
 export default FileUpload