fix type error on react18.

Author: y-hiraoka

__tests__/device.test.ts

@@ -47,10 +47,6 @@ test("usePlayerDevice is not wrapped with Provider", () => {
 test("In case useSpotifyPlayer returns null", () => {
   mockUseSpotifyPlayer.mockReturnValue(null);
   const { result } = renderHook(() => usePlayerDevice(), {
-    initialProps: {
-      playbackStateAutoUpdate: true,
-      playbackStateUpdateDuration_ms: 1000,
-    },
     wrapper: DeviceProvider,
   });
 

package-lock.json

@@ -31,8 +31,8 @@
     "@testing-library/react": "^11.2.6",
     "@testing-library/react-hooks": "^5.1.2",
     "@types/jest": "^26.0.22",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",

package.json

@@ -8,7 +8,9 @@ export type PlayerDevice = Spotify.WebPlaybackInstance & {
 
 const DeviceContext = createContext<PlayerDevice | null | undefined>(undefined);
 
-export const DeviceProvider: React.FC = ({ children }) => {
+export const DeviceProvider: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   const [device, setDevice] = useState<PlayerDevice | null>(null);
   const player = useSpotifyPlayer();
 

src/device.tsx

@@ -6,7 +6,9 @@ export type ErrorState = Spotify.Error & { type: Spotify.ErrorTypes };
 
 const ErrorStateContext = createContext<ErrorState | null | undefined>(undefined);
 
-export const ErrorStateProvider: React.FC = ({ children }) => {
+export const ErrorStateProvider: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   const [errorState, setErrorState] = useState<ErrorState | null>(null);
   const player = useSpotifyPlayer();
 

src/errorState.tsx

@@ -6,7 +6,9 @@ const PlaybackStateContext = createContext<Spotify.PlaybackState | null | undefi
   undefined,
 );
 
-export const PlaybackStateProvider: React.FC = ({ children }) => {
+export const PlaybackStateProvider: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => {
   const [playbackState, setPlaybackState] = useState<Spotify.PlaybackState | null>(
     null,
   );

src/playbackState.tsx

@@ -15,6 +15,7 @@ type ProviderProps = {
   getOAuthToken: Spotify.PlayerInit["getOAuthToken"];
   initialVolume?: Spotify.PlayerInit["volume"];
   connectOnInitialized: boolean;
+  children?: React.ReactNode;
 };
 
 export const SpotifyPlayerProvider: React.FC<ProviderProps> = ({

src/spotifyPlayer.tsx

@@ -11,6 +11,7 @@ export type WebPlaybackSDKProps = {
   getOAuthToken: Spotify.PlayerInit["getOAuthToken"];
   initialVolume?: Spotify.PlayerInit["volume"];
   connectOnInitialized?: boolean;
+  children?: React.ReactNode;
 };
 
 export const WebPlaybackSDK: React.FC<WebPlaybackSDKProps> = ({

src/webPlaybackSDK.tsx

@@ -3,7 +3,9 @@ import { MUST_BE_WRAPPED_MESSAGE } from "./constant";
 
 const WebPlaybackSDKReadyContext = createContext<boolean | undefined>(undefined);
 
-export const WebPlaybackSDKReadyProvider: React.FC = ({ children }) => {
+export const WebPlaybackSDKReadyProvider: React.FC<{
+  children?: React.ReactNode;
+}> = ({ children }) => {
   const [webPlaybackSDKReady, setWebPlaybackSDKReady] = useState(false);
 
   useEffect(() => {