diff --git a/src/components/Box.tsx b/src/components/Box.tsx
index 4151e32b..7772a350 100644
--- a/src/components/Box.tsx
+++ b/src/components/Box.tsx
@@ -9,7 +9,7 @@ export interface BoxProps extends GenericProps {
   inline?: boolean
 }
 
-const Box: React.FunctionComponent<BoxProps> = styled.div<BoxProps>`
+const Box: React.FC<BoxProps> = styled.div<BoxProps>`
   display: ${({ flex, inline }) =>
     flex
       ? inline
diff --git a/src/components/MediaQuery.tsx b/src/components/MediaQuery.tsx
index 03fd210e..adf42255 100644
--- a/src/components/MediaQuery.tsx
+++ b/src/components/MediaQuery.tsx
@@ -5,7 +5,7 @@ import normalizeQuery from '@src/utils/styles/normalizeQuery'
 import transformNumeric from '@utils/math/transformNumeric'
 import compose from '@src/utils/functions/compose'
 
-interface Props extends MediaQueryParams {
+interface MediaQueryProps extends MediaQueryParams {
   children: (matches: boolean) => JSX.Element
   matches?: boolean
 }
@@ -30,9 +30,11 @@ const createMediaQuery = (queryParams: MediaQueryParams): string => {
   )(queryParams)
 }
 
-const MediaQuery = (props: Props): JSX.Element => {
+const MediaQuery: React.FC<MediaQueryProps> = (props) => {
   const { children, ...queryParams } = props
-  const query = React.useMemo(() => createMediaQuery(queryParams), [queryParams])
+  const query = React.useMemo(() => createMediaQuery(queryParams), [
+    queryParams,
+  ])
   const [matches, setMatches] = React.useState(false)
 
   const handleMediaQueryChange = (
diff --git a/src/hooks/useResponsiveComponent.tsx b/src/hooks/useResponsiveComponent.tsx
index 58c714dc..bf69328c 100644
--- a/src/hooks/useResponsiveComponent.tsx
+++ b/src/hooks/useResponsiveComponent.tsx
@@ -10,8 +10,8 @@ function useResponsiveComponent<
   OwnProps extends Record<string, any>,
   ResponsiveProps extends Record<string, Numeric>
 >(
-  Component: React.FunctionComponent<OwnProps>,
-): React.FunctionComponent<OwnProps & Partial<ResponsiveProps>> {
+  Component: React.FC<OwnProps>,
+): React.FC<OwnProps & Partial<ResponsiveProps>> {
   return (responsiveProps) => {
     /**
      * @see https://github.com/Microsoft/TypeScript/issues/29049
diff --git a/src/utils/templates/generateComponents/generateComponents.tsx b/src/utils/templates/generateComponents/generateComponents.tsx
index 21cb9222..47afb8fd 100644
--- a/src/utils/templates/generateComponents/generateComponents.tsx
+++ b/src/utils/templates/generateComponents/generateComponents.tsx
@@ -5,9 +5,9 @@ import { GenericProps } from '@const/props'
 import MediaQuery from '@components/MediaQuery'
 import Box, { BoxProps } from '@components/Box'
 import capitalize from '@utils/strings/capitalize'
-import getAreaRecords, { AreaRecord } from '@utils/breakpoints/getAreaRecords'
+import getAreaRecords from '@utils/breakpoints/getAreaRecords'
 
-export type AreaComponent = React.FunctionComponent<BoxProps>
+export type AreaComponent = React.FC<BoxProps>
 export interface AreasMap {
   [componentName: string]: AreaComponent
 }
@@ -21,10 +21,7 @@ export const withPlaceholder = (
   Component: AreaComponent,
   breakpoints: Breakpoint[],
 ) => {
-  const Placeholder: React.FunctionComponent<GenericProps> = ({
-    children,
-    ...restProps
-  }) => {
+  const Placeholder: React.FC<GenericProps> = ({ children, ...restProps }) => {
     const PlaceholderComponent = breakpoints.reduce<JSX.Element[]>(
       (components, breakpoint, index) => {
         return components.concat(