convert props that doesn't need to be passed to dom to transient

src/components/Upload/UploadButton.tsx

@@ -5,7 +5,7 @@ import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
 import uploadManager from 'services/upload/uploadManager';
 
-const Wrapper = styled('div')<{ disableShrink: boolean }>`
+const Wrapper = styled('div')<{ $disableShrink: boolean }>`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -14,8 +14,8 @@ const Wrapper = styled('div')<{ disableShrink: boolean }>`
     & .mobile-button {
         display: none;
     }
-    ${({ disableShrink }) =>
-        !disableShrink &&
+    ${({ $disableShrink }) =>
+        !$disableShrink &&
         `@media (max-width: 624px) {
         & .mobile-button {
             display: block;
@@ -42,7 +42,7 @@ function UploadButton({
 }: Iprops) {
     return (
         <Wrapper
-            disableShrink={disableShrink}
+            $disableShrink={disableShrink}
             style={{
                 cursor: !uploadManager.shouldAllowNewUpload() && 'not-allowed',
             }}>

src/components/pages/gallery/PreviewCard.tsx

@@ -32,7 +32,7 @@ interface IProps {
     showPlaceholder: boolean;
 }
 
-const Check = styled('input')<{ active: boolean }>`
+const Check = styled('input')<{ $active: boolean }>`
     appearance: none;
     position: absolute;
     z-index: 10;
@@ -85,7 +85,7 @@ const Check = styled('input')<{ active: boolean }>`
         border-right: 2px solid #ddd;
         border-bottom: 2px solid #ddd;
     }
-    ${(props) => props.active && 'opacity: 0.5 '};
+    ${(props) => props.$active && 'opacity: 0.5 '};
     &:checked {
         opacity: 1 !important;
     }
@@ -104,15 +104,15 @@ export const HoverOverlay = styled('div')<{ checked: boolean }>`
         'background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0))'};
 `;
 
-export const InSelectRangeOverLay = styled('div')<{ active: boolean }>`
-    opacity: ${(props) => (!props.active ? 0 : 1)};
+export const InSelectRangeOverLay = styled('div')<{ $active: boolean }>`
+    opacity: ${(props) => (!props.$active ? 0 : 1)};
     left: 0;
     top: 0;
     outline: none;
     height: 100%;
     width: 100%;
     position: absolute;
-    ${(props) => props.active && 'background:rgba(81, 205, 124, 0.25)'};
+    ${(props) => props.$active && 'background:rgba(81, 205, 124, 0.25)'};
 `;
 
 export const FileAndCollectionNameOverlay = styled('div')`
@@ -304,7 +304,7 @@ export default function PreviewCard(props: IProps) {
                     type="checkbox"
                     checked={selected}
                     onChange={handleSelect}
-                    active={isRangeSelectActive && isInsSelectRange}
+                    $active={isRangeSelectActive && isInsSelectRange}
                     onClick={(e) => e.stopPropagation()}
                 />
             )}
@@ -313,7 +313,7 @@ export default function PreviewCard(props: IProps) {
             <SelectedOverlay selected={selected} />
             <HoverOverlay checked={selected} />
             <InSelectRangeOverLay
-                active={isRangeSelectActive && isInsSelectRange}
+                $active={isRangeSelectActive && isInsSelectRange}
             />
             {isLivePhoto(file) && <LivePhotoIndicator />}
             {deduplicateContext.isOnDeduplicatePage && (