refact: standardize PropsWithChildren

src/components/Container/index.tsx

@@ -1,11 +1,7 @@
-import React from "react"
+import React, { PropsWithChildren} from "react"
 import * as SC from "./styles"
 
-interface ContainerProps {
-  children: React.ReactNode
-}
-
-const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => (
+const Container = ({ children, ...restProps }: PropsWithChildren<{}>): JSX.Element => (
   <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
 )
 

src/components/DocsSidebarSection/index.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { PropsWithChildren } from "react"
 import * as SC from "./styles"
 
 export interface DocsSidebarSectionProps {
@@ -8,7 +8,7 @@ export interface DocsSidebarSectionProps {
 const DocsSidebarSection = ({
   title,
   children,
-}: React.PropsWithChildren<DocsSidebarSectionProps>) => {
+}: PropsWithChildren<DocsSidebarSectionProps>) => {
   return (
     <div>
       <SC.SidebarTitle>{title}</SC.SidebarTitle>

src/components/Sidebar/index.tsx

@@ -1,9 +1,9 @@
-import React from "react"
+import React, { PropsWithChildren } from "react"
 import logo from "../../images/tph-logo.png"
 import * as SC from "./styles"
 import ArrowRight from "../../icons/arrow-right.svg"
 
-function MenuItem({ children, to }: { children: React.ReactNode; to: string }) {
+function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   return (
     <SC.MenuItem to={to}>
       {children} <ArrowRight />