tried to fix image grid, but got no results

src/components/editors/ImageGrid/index.tsx

@@ -19,6 +19,7 @@ const SortableList = SortableContainer(({ items, locked }: { items: IFile[], loc
         items.map((file, index) => (
           <SortableItem key={file.id} index={index}>
             <ImageUpload
+              id={file.id}
               thumb={file.url}
             />
           </SortableItem>

src/components/editors/ImageGrid/styles.scss

@@ -19,7 +19,7 @@
   // flex: 0 4 25%;
   width: 25%;
   float: left;
-  padding: $gap / 2;
+  // padding: $gap / 2;
   z-index: 100;
   box-sizing: border-box;
 }

src/components/upload/ImageUpload/index.tsx

@@ -20,7 +20,7 @@ const ImageUpload: FC<IProps> = ({
   return (
     <div className={styles.wrap}>
       <div className={classNames(styles.thumb_wrap, { is_uploading })}>
-        {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }} />}
+        {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }}>{id}</div>}
         {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
       </div>
     </div>

src/components/upload/ImageUpload/styles.scss

@@ -30,7 +30,7 @@
   border-radius: $radius;
   background: no-repeat 50% 50%;
   background-size: cover;
-  opacity: 0;
+  opacity: 0.3;
 }
 
 .progress {