diff --git a/README.md b/README.md
index 7fe6521..d683559 100644
--- a/README.md
+++ b/README.md
@@ -63,53 +63,48 @@ To learn how to use react-papaparse:
 
 ![basic-upload](https://react-papaparse.github.io/static/images/csvreader1.png)
 
-```javascript
-import React, { CSSProperties } from 'react';
+```typescript
+import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   csvReader: {
     display: 'flex',
     flexDirection: 'row',
     marginBottom: 10,
-  } as CSSProperties,
+  },
   browseFile: {
     width: '20%',
-  } as CSSProperties,
+  },
   acceptedFile: {
     border: '1px solid #ccc',
     height: 45,
     lineHeight: 2.5,
     paddingLeft: 10,
     width: '80%',
-  } as CSSProperties,
+  },
   remove: {
     borderRadius: 0,
     padding: '0 20px',
-  } as CSSProperties,
+  },
   progressBarBackgroundColor: {
     backgroundColor: 'red',
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
       }}
     >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div style={styles.csvReader}>
             <button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -134,8 +129,8 @@ export default function CSVReader() {
 
 ![click-and-drag-upload](https://react-papaparse.github.io/static/images/csvreader2.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -152,7 +147,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -162,7 +157,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -173,47 +168,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -225,17 +220,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -246,7 +241,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -271,11 +266,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -299,8 +294,8 @@ export default function CSVReader() {
 
 ![drag-no-click-upload](https://react-papaparse.github.io/static/images/csvreader3.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -317,7 +312,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -327,7 +322,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -338,47 +333,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -390,17 +385,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -412,7 +407,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -437,11 +432,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -465,8 +460,8 @@ export default function CSVReader() {
 
 ![click-no-drag-upload](https://react-papaparse.github.io/static/images/csvreader4.png)
 
-```javascript
-import React, { useState, CSSProperties } from 'react';
+```typescript
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -483,7 +478,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -493,7 +488,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -504,47 +499,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -556,17 +551,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -578,7 +573,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -603,11 +598,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/docs/src/components/screens/Demo.js b/docs/src/components/screens/Demo.js
index 6f819dd..c9fd6ed 100644
--- a/docs/src/components/screens/Demo.js
+++ b/docs/src/components/screens/Demo.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 
 import { usePapaParse, useCSVReader, lightenDarkenColor, formatFileSize } from 'react-papaparse';
@@ -169,6 +169,14 @@ export default function Demo() {
   }
 ]`);
 
+  useEffect(() => {
+    if (csvData) {
+      console.log('---------------------------');
+      console.log(csvData);
+      console.log('---------------------------');
+    }
+  }, [csvData]);
+
   const handleSelect = (index) => {
     setTabIndex(index);
   };
@@ -314,7 +322,7 @@ export default function Demo() {
                         <>
                           <div style={buttonStyles.csvReader}>
                             <button
-                              type="button"
+                              type='button'
                               {...getRootProps()}
                               style={buttonStyles.browseFile}
                             >
@@ -905,7 +913,7 @@ export default class Demo extends Component {
                               }}
                             >
                               <button
-                                type="button"
+                                type='button'
                                 onClick={this.handleOpenDialog}
                                 style={{
                                   borderRadius: 0,
diff --git a/docs/src/components/screens/docs/CSVToJSON.js b/docs/src/components/screens/docs/CSVToJSON.js
index e3cbb4f..dc300db 100644
--- a/docs/src/components/screens/docs/CSVToJSON.js
+++ b/docs/src/components/screens/docs/CSVToJSON.js
@@ -64,7 +64,7 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
@@ -75,7 +75,7 @@ const CSVToJSON = () => {
     acceptedFile,
     ProgressBar,
     getRemoveFileProps,
-  }: any) => (
+  }) => (
     <>
       <div style={styles.csvReader}>
         <button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -135,17 +135,17 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
@@ -156,7 +156,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -181,11 +181,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
@@ -239,17 +239,17 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
@@ -261,7 +261,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -286,11 +286,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
@@ -348,17 +348,17 @@ const CSVToJSON = () => {
           <pre>
             <code className="language-javascript">
               {`<CSVReader
-  onUploadAccepted={(results: any) => {
+  onUploadAccepted={(results) => {
     console.log('---------------------------');
     console.log(results);
     console.log('---------------------------');
     setZoneHover(false);
   }}
-  onDragOver={(event: DragEvent) => {
+  onDragOver={(event) => {
     event.preventDefault();
     setZoneHover(true);
   }}
-  onDragLeave={(event: DragEvent) => {
+  onDragLeave={(event) => {
     event.preventDefault();
     setZoneHover(false);
   }}
@@ -370,7 +370,7 @@ const CSVToJSON = () => {
     ProgressBar,
     getRemoveFileProps,
     Remove,
-  }: any) => (
+  }) => (
     <>
       <div
         {...getRootProps()}
@@ -395,11 +395,11 @@ const CSVToJSON = () => {
               <div
                 {...getRemoveFileProps()}
                 style={styles.remove}
-                onMouseOver={(event: Event) => {
+                onMouseOver={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                 }}
-                onMouseOut={(event: Event) => {
+                onMouseOut={(event) => {
                   event.preventDefault();
                   setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                 }}
diff --git a/docs/src/components/screens/indexes/LocalFile.js b/docs/src/components/screens/indexes/LocalFile.js
index 030b5ab..a7ddf0b 100644
--- a/docs/src/components/screens/indexes/LocalFile.js
+++ b/docs/src/components/screens/indexes/LocalFile.js
@@ -41,41 +41,41 @@ const LocalFile = () => {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { CSSProperties } from 'react';
+              {`import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   csvReader: {
     display: 'flex',
     flexDirection: 'row',
     marginBottom: 10,
-  } as CSSProperties,
+  },
   browseFile: {
     width: '20%',
-  } as CSSProperties,
+  },
   acceptedFile: {
     border: '1px solid #ccc',
     height: 45,
     lineHeight: 2.5,
     paddingLeft: 10,
     width: '80%',
-  } as CSSProperties,
+  },
   remove: {
     borderRadius: 0,
     padding: '0 20px',
-  } as CSSProperties,
+  },
   progressBarBackgroundColor: {
     backgroundColor: 'red',
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
@@ -86,7 +86,7 @@ export default function CSVReader() {
         acceptedFile,
         ProgressBar,
         getRemoveFileProps,
-      }: any) => (
+      }) => (
         <>
           <div style={styles.csvReader}>
             <button type='button' {...getRootProps()} style={styles.browseFile}>
@@ -135,7 +135,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -152,7 +152,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -164,7 +164,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -175,47 +175,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -227,17 +227,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -248,7 +248,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -273,11 +273,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -325,7 +325,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -342,7 +342,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -354,7 +354,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -365,47 +365,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -417,17 +417,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -439,7 +439,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -464,11 +464,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
@@ -516,7 +516,7 @@ export default function CSVReader() {
           </div>
           <pre>
             <code className="language-javascript">
-              {`import React, { useState, CSSProperties } from 'react';
+              {`import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -533,7 +533,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     borderWidth: 2,
@@ -545,7 +545,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -556,47 +556,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -608,17 +608,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -630,7 +630,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -655,11 +655,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderBasicUpload.tsx b/examples/CSVReaderBasicUpload.tsx
index d791f7b..4231be0 100644
--- a/examples/CSVReaderBasicUpload.tsx
+++ b/examples/CSVReaderBasicUpload.tsx
@@ -1,49 +1,44 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 
 import { useCSVReader } from 'react-papaparse';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   csvReader: {
     display: 'flex',
     flexDirection: 'row',
     marginBottom: 10,
-  } as CSSProperties,
+  },
   browseFile: {
     width: '20%',
-  } as CSSProperties,
+  },
   acceptedFile: {
     border: '1px solid #ccc',
     height: 45,
     lineHeight: 2.5,
     paddingLeft: 10,
     width: '80%',
-  } as CSSProperties,
+  },
   remove: {
     borderRadius: 0,
     padding: '0 20px',
-  } as CSSProperties,
+  },
   progressBarBackgroundColor: {
     backgroundColor: 'red',
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
       }}
     >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div style={styles.csvReader}>
             <button type='button' {...getRootProps()} style={styles.browseFile}>
diff --git a/examples/CSVReaderClickAndDragUpload.tsx b/examples/CSVReaderClickAndDragUpload.tsx
index bc527ed..2881ca1 100644
--- a/examples/CSVReaderClickAndDragUpload.tsx
+++ b/examples/CSVReaderClickAndDragUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -88,17 +88,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -109,7 +109,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -134,11 +134,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderClickNoDragUpload.tsx b/examples/CSVReaderClickNoDragUpload.tsx
index 851823c..ea00858 100644
--- a/examples/CSVReaderClickNoDragUpload.tsx
+++ b/examples/CSVReaderClickNoDragUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -88,17 +88,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -110,7 +110,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -135,11 +135,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/examples/CSVReaderDragNoClickUpload.tsx b/examples/CSVReaderDragNoClickUpload.tsx
index dee2d53..84f57ad 100644
--- a/examples/CSVReaderDragNoClickUpload.tsx
+++ b/examples/CSVReaderDragNoClickUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -88,17 +88,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -110,7 +110,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -135,11 +135,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index 1d13f05..8fa55a5 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -1,29 +1,29 @@
-import React, { CSSProperties, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const DEFAULT_PROGRESS_BAR_COLOR = '#659cef';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   progressBar: {
     borderRadius: 3,
     boxShadow: 'inset 0 1px 3px rgba(0, 0, 0, .2)',
     bottom: 14,
     width: '100%',
     // position: 'absolute',
-  } as CSSProperties,
+  },
   button: {
     position: 'inherit',
     width: '100%',
-  } as CSSProperties,
+  },
   fill: {
     backgroundColor: DEFAULT_PROGRESS_BAR_COLOR,
     borderRadius: 3,
     height: 10,
     transition: 'width 500ms ease-in-out',
-  } as CSSProperties,
+  },
 };
 
 interface Props {
-  style?: any;
+  style?: React.CSSProperties;
   className?: string;
   percentage: number;
   display: string;
diff --git a/src/model.tsx b/src/model.tsx
index b7971b4..5357f4c 100644
--- a/src/model.tsx
+++ b/src/model.tsx
@@ -3,7 +3,7 @@ import { ParseConfig, ParseResult, Parser } from 'papaparse';
 // 5.3 => https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/papaparse/index.d.ts
 // 5.2 => https://github.com/DefinitelyTyped/DefinitelyTyped/blob/d3737ebd9125505f7ea237b9f17f1426579a3917/types/papaparse/index.d.ts
 
-export interface CustomConfig<T = any, TInput = undefined>
+export interface CustomConfig<T = void, TInput = undefined>
   extends ParseConfig<T, TInput> {
   /**
    * * * * * * * * * *
diff --git a/src/useCSVDownloader.tsx b/src/useCSVDownloader.tsx
index 91e5610..93ece91 100644
--- a/src/useCSVDownloader.tsx
+++ b/src/useCSVDownloader.tsx
@@ -11,7 +11,7 @@ export interface Props {
   data: any;
   filename: string;
   type?: 'link' | 'button';
-  style?: any;
+  style?: React.CSSProperties;
   className?: string;
   bom?: boolean;
   config?: UnparseConfig;
diff --git a/src/useCSVReader.tsx b/src/useCSVReader.tsx
index 387db2d..97c1e65 100644
--- a/src/useCSVReader.tsx
+++ b/src/useCSVReader.tsx
@@ -1,10 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, {
-  useReducer,
+  DragEventHandler,
+  FocusEventHandler,
+  HTMLAttributes,
+  KeyboardEventHandler,
+  MouseEventHandler,
   useCallback,
-  useMemo,
   useEffect,
-  ReactNode,
+  useMemo,
+  useReducer,
   useRef,
 } from 'react';
 import PapaParse, { ParseResult } from 'papaparse';
@@ -27,8 +31,14 @@ import Remove, { Props as RemoveComponentProps } from './Remove';
 // 'application/vnd.ms-excel' for Window 10
 const DEFAULT_ACCEPT = 'text/csv, .csv, application/vnd.ms-excel';
 
-export interface Props<T> {
-  children: (fn: any) => void | ReactNode;
+export interface Props<T, E> {
+  children: (fn: {
+    getRootProps: () => HTMLAttributes<E>;
+    acceptedFile: File;
+    ProgressBar: React.ComponentType<ProgressBarComponentProps>;
+    getRemoveFileProps: () => HTMLAttributes<E>;
+    Remove: React.ComponentType<RemoveComponentProps>;
+  }) => void | React.ReactNode;
   accept?: string;
   config?: CustomConfig<T>;
   minSize?: number;
@@ -49,17 +59,20 @@ export interface Props<T> {
   ) => void;
   onUploadRejected?: (file?: File, event?: DragEvent | Event) => void;
   validator?: (file: File) => void;
-  onDragEnter?: (event?: DragEvent) => void;
-  onDragOver?: (event?: DragEvent) => void;
-  onDragLeave?: (event?: DragEvent) => void;
+  onDragEnter?: (event: DragEvent) => void;
+  onDragOver?: (event: DragEvent) => void;
+  onDragLeave?: (event: DragEvent) => void;
 }
 
-export interface ProgressBarComponentProp {
-  style?: any;
+export interface ProgressBarComponentProps {
+  style?: React.CSSProperties;
   className?: string;
 }
 
-function useCSVReaderComponent<T = any>() {
+function useCSVReaderComponent<
+  T,
+  E extends HTMLDivElement | HTMLButtonElement,
+>() {
   const CSVReaderComponent = ({
     children,
     accept = DEFAULT_ACCEPT,
@@ -81,9 +94,9 @@ function useCSVReaderComponent<T = any>() {
     onDragEnter,
     onDragOver,
     onDragLeave,
-  }: Props<T>) => {
-    const inputRef: any = useRef<ReactNode>(null);
-    const rootRef: any = useRef<ReactNode>(null);
+  }: Props<T, E>) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const rootRef = useRef<E>(null);
     const dragTargetsRef = useRef([]);
 
     const [state, dispatch] = useReducer(reducer, initialState);
@@ -96,7 +109,10 @@ function useCSVReaderComponent<T = any>() {
     } = state;
 
     const onDocumentDrop = (event: DragEvent) => {
-      if (rootRef.current && rootRef.current.contains(event.target)) {
+      if (
+        rootRef.current &&
+        rootRef.current.contains(event.target as Element)
+      ) {
         // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
         return;
       }
@@ -154,7 +170,7 @@ function useCSVReaderComponent<T = any>() {
       });
     };
 
-    const ProgressBarComponent = (props: ProgressBarComponentProp) => {
+    const ProgressBarComponent = (props: ProgressBarComponentProps) => {
       return (
         <ProgressBar
           display={displayProgressBar}
@@ -182,7 +198,8 @@ function useCSVReaderComponent<T = any>() {
     const openFileDialog = useCallback(() => {
       if (inputRef.current && state.displayProgressBar) {
         dispatch({ type: 'openDialog' });
-        inputRef.current.value = null;
+        inputRef.current.value = '';
+        inputRef.current.files = null;
         inputRef.current.click();
       }
     }, [dispatch]);
@@ -195,7 +212,7 @@ function useCSVReaderComponent<T = any>() {
           if (inputRef.current) {
             const { files } = inputRef.current;
 
-            if (!files.length) {
+            if (!files || !files.length) {
               dispatch({ type: 'closeDialog' });
             }
           }
@@ -467,7 +484,10 @@ function useCSVReaderComponent<T = any>() {
     const onKeyDownCb = useCallback(
       (event: KeyboardEvent) => {
         // Ignore keyboard events bubbling up the DOM tree
-        if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+        if (
+          !rootRef.current ||
+          !rootRef.current.isEqualNode(event.target as Element)
+        ) {
           return;
         }
 
@@ -501,6 +521,15 @@ function useCSVReaderComponent<T = any>() {
           onDragEnter = () => {},
           // refKey = rootRef,
           ...rest
+        }: {
+          onClick?: MouseEventHandler<E>;
+          onDrop?: DragEventHandler<E>;
+          onDragEnter?: DragEventHandler<E>;
+          onDragLeave?: DragEventHandler<E>;
+          onDragOver?: DragEventHandler<E>;
+          onKeyDown?: KeyboardEventHandler<E>;
+          onFocus?: FocusEventHandler<E>;
+          onBlur?: FocusEventHandler<E>;
         } = {}) => ({
           onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),
           onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
@@ -576,7 +605,10 @@ function useCSVReaderComponent<T = any>() {
     // ===========
 
     const removeFileProgrammaticallyCb = useCallback((event: Event) => {
-      inputRef.current.value = '';
+      if (inputRef.current) {
+        inputRef.current.value = '';
+        inputRef.current.files = null;
+      }
       dispatch({ type: 'reset' });
       // To prevent a parents onclick event from firing when a child is clicked
       event.stopPropagation();
@@ -584,7 +616,10 @@ function useCSVReaderComponent<T = any>() {
 
     const getRemoveFileProps = useMemo(
       () =>
-        ({ onClick = () => {}, ...rest } = {}) => ({
+        ({
+          onClick = () => {},
+          ...rest
+        }: { onClick?: MouseEventHandler<HTMLElement> } = {}) => ({
           onClick: composeHandler(
             composeEventHandlers(onClick, removeFileProgrammaticallyCb),
           ),
@@ -601,13 +636,41 @@ function useCSVReaderComponent<T = any>() {
     );
   };
 
-  const CSVReader = useMemo(() => CSVReaderComponent, []) as any;
+  const CSVReader = useMemo(
+    () => CSVReaderComponent,
+    [],
+  ) as React.ComponentType<Props<T, E>>;
 
   return CSVReader;
 }
 
-export function useCSVReader() {
-  const CSVReader = useCSVReaderComponent();
+/**
+ * A React hook to use the CSVReader component.
+ * @returns The CSVReader component.
+ *
+ * @template T - The type of the parsed CSV file data result, where each key
+ * represents a column in the CSV file and each value represents the data type.
+ * @template E - The type of the HTML element used for the input. Can be
+ * HTMLDivElement or HTMLButtonElement. Defaults to HTMLDivElement.
+ *
+ * @example HTMLDivElement as the input element
+ * ```tsx
+ * import { useCSVReader } from 'react-papaparse';
+ * const { CSVReader } = useCSVReader();
+ * ```
+ * @example HTMLButtonElement as the input element
+ * ```tsx
+ * import { useCSVReader } from 'react-papaparse';
+ * const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
+ * ```
+ *
+ * @see {@link https://react-papaparse.js.org/docs#local-files Usage with Local Files}
+ */
+export function useCSVReader<
+  T = string[],
+  E extends HTMLDivElement | HTMLButtonElement = HTMLDivElement,
+>() {
+  const CSVReader = useCSVReaderComponent<T, E>();
 
   return {
     CSVReader,
diff --git a/supports/create-next-app/pages/index.tsx b/supports/create-next-app/pages/index.tsx
index bc527ed..2881ca1 100644
--- a/supports/create-next-app/pages/index.tsx
+++ b/supports/create-next-app/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, CSSProperties } from 'react';
+import React, { useState } from 'react';
 
 import {
   useCSVReader,
@@ -15,7 +15,7 @@ const REMOVE_HOVER_COLOR_LIGHT = lightenDarkenColor(
 );
 const GREY_DIM = '#686868';
 
-const styles = {
+const styles: Record<string, React.CSSProperties> = {
   zone: {
     alignItems: 'center',
     border: `2px dashed ${GREY}`,
@@ -25,7 +25,7 @@ const styles = {
     height: '100%',
     justifyContent: 'center',
     padding: 20,
-  } as CSSProperties,
+  },
   file: {
     background: 'linear-gradient(to bottom, #EEE, #DDD)',
     borderRadius: 20,
@@ -36,47 +36,47 @@ const styles = {
     zIndex: 10,
     flexDirection: 'column',
     justifyContent: 'center',
-  } as CSSProperties,
+  },
   info: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   size: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     marginBottom: '0.5em',
     justifyContent: 'center',
     display: 'flex',
-  } as CSSProperties,
+  },
   name: {
     backgroundColor: GREY_LIGHT,
     borderRadius: 3,
     fontSize: 12,
     marginBottom: '0.5em',
-  } as CSSProperties,
+  },
   progressBar: {
     bottom: 14,
     position: 'absolute',
     width: '100%',
     paddingLeft: 10,
     paddingRight: 10,
-  } as CSSProperties,
+  },
   zoneHover: {
     borderColor: GREY_DIM,
-  } as CSSProperties,
+  },
   default: {
     borderColor: GREY,
-  } as CSSProperties,
+  },
   remove: {
     height: 23,
     position: 'absolute',
     right: 6,
     top: 6,
     width: 23,
-  } as CSSProperties,
+  },
 };
 
 export default function CSVReader() {
@@ -88,17 +88,17 @@ export default function CSVReader() {
 
   return (
     <CSVReader
-      onUploadAccepted={(results: any) => {
+      onUploadAccepted={(results) => {
         console.log('---------------------------');
         console.log(results);
         console.log('---------------------------');
         setZoneHover(false);
       }}
-      onDragOver={(event: DragEvent) => {
+      onDragOver={(event) => {
         event.preventDefault();
         setZoneHover(true);
       }}
-      onDragLeave={(event: DragEvent) => {
+      onDragLeave={(event) => {
         event.preventDefault();
         setZoneHover(false);
       }}
@@ -109,7 +109,7 @@ export default function CSVReader() {
         ProgressBar,
         getRemoveFileProps,
         Remove,
-      }: any) => (
+      }) => (
         <>
           <div
             {...getRootProps()}
@@ -134,11 +134,11 @@ export default function CSVReader() {
                   <div
                     {...getRemoveFileProps()}
                     style={styles.remove}
-                    onMouseOver={(event: Event) => {
+                    onMouseOver={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(REMOVE_HOVER_COLOR_LIGHT);
                     }}
-                    onMouseOut={(event: Event) => {
+                    onMouseOut={(event) => {
                       event.preventDefault();
                       setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                     }}
diff --git a/supports/create-react-app/src/App.js b/supports/create-react-app/src/App.js
index 6679e00..af6e421 100644
--- a/supports/create-react-app/src/App.js
+++ b/supports/create-react-app/src/App.js
@@ -122,7 +122,7 @@
 //             "Column 4": 7,
 //           },
 //         ]}
-//         type="button"
+//         type='button'
 //         filename={'filename'}
 //         config={
 //           {
diff --git a/test/CustomReader.tsx b/test/CustomReader.tsx
index 5413b3a..104c933 100644
--- a/test/CustomReader.tsx
+++ b/test/CustomReader.tsx
@@ -9,30 +9,19 @@ interface CustomReaderProps {
 const CustomReader: React.FC<CustomReaderProps> = (
   props: CustomReaderProps
 ) => {
-  const { CSVReader } = useCSVReader();
+  const { CSVReader } = useCSVReader<string[][], HTMLButtonElement>();
   const { onUploadAccepted, label } = props;
 
   return (
-    <CSVReader
-      onUploadAccepted={onUploadAccepted}
-    >
-      {({
-        getRootProps,
-        acceptedFile,
-        ProgressBar,
-        getRemoveFileProps,
-      }: any) => (
+    <CSVReader onUploadAccepted={onUploadAccepted}>
+      {({ getRootProps, acceptedFile, ProgressBar, getRemoveFileProps }) => (
         <>
           <div>
             <button type='button' {...getRootProps()}>
               {label}
             </button>
-            <div>
-              {acceptedFile && acceptedFile.name}
-            </div>
-            <button {...getRemoveFileProps()}>
-              Remove
-            </button>
+            <div>{acceptedFile && acceptedFile.name}</div>
+            <button {...getRemoveFileProps()}>Remove</button>
           </div>
           <ProgressBar />
         </>
diff --git a/test/__snapshots__/CSVReader.spec.tsx.snap b/test/__snapshots__/CSVReader.spec.tsx.snap
index 4abb796..ff27024 100644
--- a/test/__snapshots__/CSVReader.spec.tsx.snap
+++ b/test/__snapshots__/CSVReader.spec.tsx.snap
@@ -27,7 +27,7 @@ Array [
       onDrop={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
-      type="button"
+      type='button'
     >
       Chargez votre offre
     </button>