Upgrade all dependencies to latest

Fix TS errors from React.FC change.

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

package.json

@@ -49,46 +49,46 @@
         "not IE 11"
     ],
     "devDependencies": {
-        "@babel/core": "^7.16.0",
-        "@rollup/plugin-typescript": "^8.3.0",
-        "@storybook/addon-essentials": "^6.3.12",
-        "@storybook/addon-links": "^6.3.12",
-        "@storybook/react": "^6.3.12",
-        "@swc/core": "^1.2.111",
-        "@swc/jest": "^0.2.5",
-        "@testing-library/jest-dom": "^5.15.0",
-        "@testing-library/react": "^12.1.2",
-        "@types/react": "^17.0.35",
-        "@types/react-dom": "^17.0.11",
-        "@typescript-eslint/eslint-plugin": "^5.4.0",
-        "@typescript-eslint/parser": "^5.4.0",
-        "babel-loader": "^8.2.3",
-        "eslint": "^8.2.0",
-        "eslint-config-airbnb": "^19.0.0",
-        "eslint-config-airbnb-typescript": "^16.0.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-import": "^2.25.3",
-        "eslint-plugin-jest": "^25.2.4",
-        "eslint-plugin-jest-dom": "^3.9.2",
+        "@babel/core": "^7.17.9",
+        "@rollup/plugin-typescript": "^8.3.1",
+        "@storybook/addon-essentials": "^6.4.21",
+        "@storybook/addon-links": "^6.4.21",
+        "@storybook/react": "^6.4.21",
+        "@swc/core": "^1.2.165",
+        "@swc/jest": "^0.2.20",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.0.0",
+        "@types/react": "^18.0.1",
+        "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.18.0",
+        "@typescript-eslint/parser": "^5.18.0",
+        "babel-loader": "^8.2.4",
+        "eslint": "^8.13.0",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-jest": "^26.1.4",
+        "eslint-plugin-jest-dom": "^4.0.1",
         "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.27.1",
-        "eslint-plugin-react-hooks": "^4.3.0",
-        "eslint-plugin-testing-library": "^5.0.0",
+        "eslint-plugin-react": "^7.29.4",
+        "eslint-plugin-react-hooks": "^4.4.0",
+        "eslint-plugin-testing-library": "^5.2.1",
         "husky": "^7.0.4",
-        "jest": "^27.3.1",
-        "lint-staged": "^12.0.3",
-        "prettier": "^2.4.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "jest": "^27.5.1",
+        "lint-staged": "^12.3.7",
+        "prettier": "^2.6.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
         "rimraf": "^3.0.2",
-        "rollup": "^2.60.0",
+        "rollup": "^2.70.1",
         "rollup-plugin-copy": "^3.4.0",
         "tslib": "^2.3.1",
-        "typescript": "^4.5.2",
-        "webpack": "^5.64.2"
+        "typescript": "^4.6.3",
+        "webpack": "^5.72.0"
     },
     "peerDependencies": {
         "react": ">=16.8.0"
     },
-    "packageManager": "yarn@3.1.0"
+    "packageManager": "yarn@3.2.0"
 }

src/Skeleton.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-array-index-key */
-import React, { CSSProperties, ReactElement } from 'react'
+import React, { CSSProperties, PropsWithChildren, ReactElement } from 'react'
 import { SkeletonThemeContext } from './SkeletonThemeContext'
 import { SkeletonStyleProps } from './SkeletonStyleProps'
 
@@ -41,7 +41,7 @@ function styleOptionsToCssProperties({
 
 export interface SkeletonProps extends SkeletonStyleProps {
     count?: number
-    wrapper?: React.FunctionComponent
+    wrapper?: React.FunctionComponent<PropsWithChildren<unknown>>
 
     className?: string
     containerClassName?: string

src/__stories__/Skeleton.stories.tsx

@@ -113,7 +113,7 @@ export const CustomStyles: React.VFC = () => (
 export const Circle: React.VFC = () => <Skeleton height={50} width={50} circle />
 
 // Use https://bennettfeely.com/clippy/ to try out other shapes
-const StarWrapper: React.FC = ({ children }) => (
+const StarWrapper: React.FC<PropsWithChildren<unknown>> = ({ children }) => (
     <div
         style={{
             display: 'inline-block',

src/__tests__/Skeleton.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { render, screen } from '@testing-library/react'
 import { Skeleton } from '../Skeleton'
 import {
@@ -107,7 +107,9 @@ it('applies the containerClassName and containerTestId', () => {
 })
 
 it('renders a skeleton with a wrapper', () => {
-    const Wrapper: React.FC = ({ children }) => <div className="box">{children}</div>
+    const Wrapper: React.FC<PropsWithChildren<unknown>> = ({ children }) => (
+        <div className="box">{children}</div>
+    )
 
     render(<Skeleton wrapper={Wrapper} />)