diff --git a/src/factory/createReducerContext.ts b/src/factory/createReducerContext.ts
index db24bfbb82..52f24da416 100644
--- a/src/factory/createReducerContext.ts
+++ b/src/factory/createReducerContext.ts
@@ -10,9 +10,12 @@ const createReducerContext = <R extends React.Reducer<any, any>>(
     );
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
-  const ReducerProvider: React.FC<{ initialState?: React.ReducerState<R> }> = ({
+  const ReducerProvider = ({
     children,
     initialState,
+  }: {
+    children?: React.ReactNode;
+    initialState?: React.ReducerState<R>;
   }) => {
     const state = useReducer<R>(
       reducer,
diff --git a/src/factory/createStateContext.ts b/src/factory/createStateContext.ts
index 4c3919c526..34d0a84864 100644
--- a/src/factory/createStateContext.ts
+++ b/src/factory/createStateContext.ts
@@ -5,7 +5,13 @@ const createStateContext = <T>(defaultInitialValue: T) => {
     createContext<[T, React.Dispatch<React.SetStateAction<T>>] | undefined>(undefined);
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
-  const StateProvider: React.FC<{ initialValue?: T }> = ({ children, initialValue }) => {
+  const StateProvider = ({
+    children,
+    initialValue,
+  }: {
+    children?: React.ReactNode;
+    initialValue?: T;
+  }) => {
     const state = useState<T>(initialValue !== undefined ? initialValue : defaultInitialValue);
     return providerFactory({ value: state }, children);
   };
diff --git a/src/useMedia.ts b/src/useMedia.ts
index 5c34d4146a..aefa1cd845 100644
--- a/src/useMedia.ts
+++ b/src/useMedia.ts
@@ -10,7 +10,7 @@ const getInitialState = (query: string, defaultState?: boolean) => {
   if (isBrowser) {
     return window.matchMedia(query).matches;
   }
-  
+
   // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
   if (process.env.NODE_ENV !== 'production') {
     console.warn(
diff --git a/stories/useHarmonicIntervalFn.story.tsx b/stories/useHarmonicIntervalFn.story.tsx
index 0a9eba1a14..9906a2e91b 100644
--- a/stories/useHarmonicIntervalFn.story.tsx
+++ b/stories/useHarmonicIntervalFn.story.tsx
@@ -3,7 +3,12 @@ import * as React from 'react';
 import { useHarmonicIntervalFn, useInterval, useTimeoutFn } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+const Clock = ({
+  useInt,
+}: {
+  children?: React.ReactNode;
+  useInt: typeof useHarmonicIntervalFn;
+}) => {
   const [count, setCount] = React.useState(0);
   useInt(() => {
     setCount((cnt) => cnt + 1);
@@ -25,7 +30,7 @@ const Clock: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) =
   return <div style={style}>{m + ':' + s}</div>;
 };
 
-const Demo: React.FC<{ useInt: typeof useHarmonicIntervalFn }> = ({ useInt }) => {
+const Demo = ({ useInt }: { children?: React.ReactNode; useInt: typeof useHarmonicIntervalFn }) => {
   const [showSecondClock, setShowSecondClock] = React.useState(false);
   useTimeoutFn(() => {
     setShowSecondClock(true);
diff --git a/stories/useMouse.story.tsx b/stories/useMouse.story.tsx
index 9892cab68e..dd9e8ef7c2 100644
--- a/stories/useMouse.story.tsx
+++ b/stories/useMouse.story.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMouse } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = () => {
+const Demo = () => {
   const ref = React.useRef(null);
   const state = useMouse(ref);
 
diff --git a/stories/useMouseHovered.story.tsx b/stories/useMouseHovered.story.tsx
index bdbca44e2f..aaa32ea885 100644
--- a/stories/useMouseHovered.story.tsx
+++ b/stories/useMouseHovered.story.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useMouseHovered } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = ({ whenHovered, bound }) => {
+const Demo = ({ whenHovered, bound }: any) => {
   const ref = React.useRef(null);
   const state = useMouseHovered(ref, { whenHovered, bound });
 
diff --git a/stories/useMouseWheel.story.tsx b/stories/useMouseWheel.story.tsx
index d5af90ea36..34fd8aac33 100644
--- a/stories/useMouseWheel.story.tsx
+++ b/stories/useMouseWheel.story.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useMouseWheel } from '../src';
 import ShowDocs from './util/ShowDocs';
 
-const Demo: React.FC<any> = () => {
+const Demo = () => {
   const mouseWheel = useMouseWheel();
   return (
     <>
diff --git a/tests/createReducerContext.test.tsx b/tests/createReducerContext.test.tsx
index fdea3dd66f..54d69a39d2 100644
--- a/tests/createReducerContext.test.tsx
+++ b/tests/createReducerContext.test.tsx
@@ -33,7 +33,7 @@ describe('when using created hook', () => {
 
   const setUp = () => {
     const [useSharedNumber, SharedNumberProvider] = createReducerContext(reducer, 0);
-    const wrapper: React.FC = ({ children }) => (
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
       <SharedNumberProvider>{children}</SharedNumberProvider>
     );
     return renderHook(() => useSharedNumber(), { wrapper });
diff --git a/tests/createStateContext.test.tsx b/tests/createStateContext.test.tsx
index 2c89ef2124..c5c861f808 100644
--- a/tests/createStateContext.test.tsx
+++ b/tests/createStateContext.test.tsx
@@ -18,7 +18,9 @@ describe('when using created hook', () => {
 
   const setUp = () => {
     const [useSharedText, SharedTextProvider] = createStateContext('init');
-    const wrapper: React.FC = ({ children }) => <SharedTextProvider>{children}</SharedTextProvider>;
+    const wrapper = ({ children }: { children?: React.ReactNode }) => (
+      <SharedTextProvider>{children}</SharedTextProvider>
+    );
     return renderHook(() => useSharedText(), { wrapper });
   };