Fix warnings

Refs:
https://stackoverflow.com/questions/69730364/what-is-the-purpose-of-shouldforwardprop-option-in-styled

web/apps/photos/src/components/PhotoList/index.tsx

@@ -111,14 +111,13 @@ function getShrinkRatio(width: number, columns: number) {
     );
 }
 
-const ListContainer = styled(Box)<{
-    columns: number;
-    shrinkRatio: number;
-    groups?: number[];
+const ListContainer = styled(Box, {
+    shouldForwardProp: (propName) => propName != "gridTemplateColumns",
+})<{
+    gridTemplateColumns: string;
 }>`
     display: grid;
-    grid-template-columns: ${({ columns, shrinkRatio, groups }) =>
-        getTemplateColumns(columns, shrinkRatio, groups)};
+    grid-template-columns: ${(props) => props.gridTemplateColumns};
     grid-column-gap: ${GAP_BTW_TILES}px;
     width: 100%;
     color: #fff;
@@ -235,9 +234,11 @@ const PhotoListRow = React.memo(
         return (
             <ListItem style={style}>
                 <ListContainer
-                    columns={columns}
-                    shrinkRatio={shrinkRatio}
-                    groups={timeStampList[index].groups}
+                    gridTemplateColumns={getTemplateColumns(
+                        columns,
+                        shrinkRatio,
+                        timeStampList[index].groups,
+                    )}
                 >
                     {renderListItem(timeStampList[index], isScrolling)}
                 </ListContainer>

web/apps/photos/src/components/Search/SearchBar/styledComponents.tsx

@@ -23,7 +23,9 @@ export const SearchMobileBox = styled(FluidContainer)`
     }
 `;
 
-export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
+export const SearchInputWrapper = styled(CenteredFlex, {
+    shouldForwardProp: (propName) => propName != "isOpen",
+})<{ isOpen: boolean }>`
     background: ${({ theme }) => theme.colors.background.base};
     max-width: 484px;
     margin: auto;

web/packages/shared/components/Navbar/base.tsx

@@ -1,6 +1,9 @@
 import { styled } from "@mui/material";
 import { FlexWrapper } from "../../components/Container";
-const NavbarBase = styled(FlexWrapper)<{ isMobile: boolean }>`
+
+const NavbarBase = styled(FlexWrapper, {
+    shouldForwardProp: (propName) => propName != "isMobile",
+})<{ isMobile: boolean }>`
     min-height: 64px;
     position: sticky;
     top: 0;