use FC instead of FunctionalComponent

components/ui/ClickOutside/ClickOutside.tsx

@@ -1,9 +1,4 @@
-import React, {
-  FunctionComponent,
-  MutableRefObject,
-  useEffect,
-  useRef,
-} from 'react'
+import React, { FC, MutableRefObject, useEffect, useRef } from 'react'
 
 import { Component } from 'react'
 import PropTypes from 'prop-types'

components/ui/Container/Container.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Container.module.css'
 
 interface Props {
@@ -8,11 +8,7 @@ interface Props {
   el?: HTMLElement
 }
 
-const Container: FunctionComponent<Props> = ({
-  children,
-  className,
-  el = 'div',
-}) => {
+const Container: FC<Props> = ({ children, className, el = 'div' }) => {
   const rootClassName = cn(s.root, className)
 
   let Component: React.ComponentType<React.HTMLAttributes<

components/ui/Sidebar/Sidebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 import s from './Sidebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Sidebar: FunctionComponent<Props> = ({ className, children }) => {
+const Sidebar: FC<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   return (
     <div className={rootClassName}>

components/ui/_BLANK/Featurebar.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { FunctionComponent } from 'react'
+import { FC } from 'react'
 import s from './Featurebar.module.css'
 
 interface Props {
@@ -7,7 +7,7 @@ interface Props {
   children?: any
 }
 
-const Featurebar: FunctionComponent<Props> = ({ children, className }) => {
+const Featurebar: FC<Props> = ({ children, className }) => {
   const rootClassName = cn(s.root, className)
   return <div className={rootClassName}>{children}</div>
 }

components/ui/context.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react'
+import React, { FC } from 'react'
 
 export interface UIState {
   displaySidebar: boolean
@@ -15,7 +15,7 @@ const initialState = {
 export const UIContext = React.createContext(initialState)
 UIContext.displayName = 'UIContext'
 
-export const UIProvider: FunctionComponent = (props) => {
+export const UIProvider: FC = (props) => {
   const [state, dispatch] = React.useReducer(uiReducer, initialState)
 
   const openSidebar = () => dispatch('OPEN_SIDEBAR')