chore(deps): update react to 18 (#2943)

src/components/Layout/LanguagePicker/index.tsx

@@ -11,7 +11,7 @@ const messages = defineMessages({
   displaylanguage: 'Display Language',
 });
 
-const LanguagePicker: React.FC = () => {
+const LanguagePicker = () => {
   const intl = useIntl();
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { locale, setLocale } = useLocale();

src/components/Layout/Notifications/index.tsx

@@ -1,7 +1,7 @@
 import { BellIcon } from '@heroicons/react/outline';
 import React from 'react';
 
-const Notifications: React.FC = () => {
+const Notifications = () => {
   return (
     <button
       className="rounded-full p-1 text-gray-400 hover:bg-gray-500 hover:text-white focus:text-white focus:outline-none focus:ring"

src/components/Layout/SearchInput/index.tsx

@@ -8,7 +8,7 @@ const messages = defineMessages({
   searchPlaceholder: 'Search Movies & TV',
 });
 
-const SearchInput: React.FC = () => {
+const SearchInput = () => {
   const intl = useIntl();
   const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
   return (

src/components/Layout/Sidebar/index.tsx

@@ -85,7 +85,7 @@ const SidebarLinks: SidebarLinkProps[] = [
   },
 ];
 
-const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
+const Sidebar = ({ open, setClosed }: SidebarProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const intl = useIntl();

src/components/Layout/UserDropdown/index.tsx

@@ -14,7 +14,7 @@ const messages = defineMessages({
   signout: 'Sign Out',
 });
 
-const UserDropdown: React.FC = () => {
+const UserDropdown = () => {
   const intl = useIntl();
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { user, revalidate } = useUser();

src/components/Layout/VersionStatus/index.tsx

@@ -22,7 +22,7 @@ interface VersionStatusProps {
   onClick?: () => void;
 }
 
-const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
+const VersionStatus = ({ onClick }: VersionStatusProps) => {
   const intl = useIntl();
   const { data } = useSWR<StatusResponse>('/api/v1/status', {
     refreshInterval: 60 * 1000,

src/components/Layout/index.tsx

@@ -10,7 +10,11 @@ import SearchInput from './SearchInput';
 import Sidebar from './Sidebar';
 import UserDropdown from './UserDropdown';
 
-const Layout: React.FC = ({ children }) => {
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+const Layout = ({ children }: LayoutProps) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const { user } = useUser();