upgrade @types/react and @types/styled-components

See DefinitelyTyped/DefinitelyTyped#59765 (comment)

package.json

@@ -60,5 +60,8 @@
     "prettier": "^2.6.2",
     "typescript": "^4.7.3"
   },
-  "packageManager": "yarn@3.1.1"
+  "packageManager": "yarn@3.1.1",
+  "resolutions": {
+    "@types/react": "18.0.12"
+  }
 }

src/components.tsx

@@ -21,14 +21,20 @@ export const Box = styled(Fabric.Box)<BoxProps>(system({ transform: true }))
 
 // Layout
 
-export type ContainerProps = Fabric.ContainerProps
-export const Container = Fabric.Container
+export interface ContainerProps extends Fabric.ContainerProps {
+  children?: React.ReactNode
+}
+export const Container: React.ComponentType<ContainerProps> = Fabric.Container
 
-export type FlexProps = FabricFlex.FlexProps
-export const Flex = FabricFlex.Flex
+export interface FlexProps extends FabricFlex.FlexProps {
+  children?: React.ReactNode
+}
+export const Flex: React.ComponentType<FlexProps> = FabricFlex.Flex
 
-export type GridProps = Fabric.GridProps
-export const Grid = Fabric.Grid
+export interface GridProps extends Fabric.GridProps {
+  children?: React.ReactNode
+}
+export const Grid: React.ComponentType<GridProps> = Fabric.Grid
 
 // Text
 
@@ -37,6 +43,7 @@ export interface TextProps extends TypographyProps, ColorProps {
   cursor?: string
   textDecoration?: string
   whiteSpace?: string
+  children?: React.ReactNode
 }
 export const Text = forwardAs(
   styled(({ as = 'span', ...rest }: TextProps) => {

src/layout.tsx

@@ -111,7 +111,7 @@ const DefaultFooter: React.FC = () => (
   </Footer>
 )
 
-export const DefaultLayout = enhance(({ children, ...rest }) => (
+export const DefaultLayout = enhance(({ children, ...rest }: BoxProps) => (
   <Layout {...rest}>
     <DefaultHeader />
     <Main>{children}</Main>
@@ -120,7 +120,7 @@ export const DefaultLayout = enhance(({ children, ...rest }) => (
 ))
 
 export const withSidebar = (sidebar: React.ReactNode) =>
-  enhance(({ children, ...rest }) => (
+  enhance(({ children, ...rest }: BoxProps) => (
     <Layout {...rest}>
       <DefaultHeader />
       <Main>{children}</Main>