diff --git a/package-lock.json b/package-lock.json
index ca1d112e..996b16ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@types/node": "^20.8.8",
         "@types/react": "^18.2.31",
         "@types/react-dom": "^18.2.14",
+        "@types/react-modal": "^3.16.3",
         "bootstrap": ">=5.1.3",
         "codemirror": "^5.65.3",
         "cross-env": "^7.0.3",
@@ -3589,6 +3590,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
+      "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-redux": {
       "version": "7.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz",
@@ -27733,6 +27742,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-modal": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
+      "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-redux": {
       "version": "7.1.20",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.20.tgz",
diff --git a/package.json b/package.json
index 8ccc28e7..b77616b8 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@types/node": "^20.8.8",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
+    "@types/react-modal": "^3.16.3",
     "bootstrap": ">=5.1.3",
     "codemirror": "^5.65.3",
     "cross-env": "^7.0.3",
diff --git a/src/components/common/ImageSelector.js b/src/components/common/ImageSelector.tsx
similarity index 67%
rename from src/components/common/ImageSelector.js
rename to src/components/common/ImageSelector.tsx
index 84aa7bf3..ff6dcfa3 100644
--- a/src/components/common/ImageSelector.js
+++ b/src/components/common/ImageSelector.tsx
@@ -3,11 +3,19 @@ import ReactModal from 'react-modal';
 import { Container } from 'reactstrap';
 import '../../styles/ImageSelector.scss';
 
-const ImageSelector = function (props) {
-  // Extracting all data from props
-  const {
-    isOpen, closeModal, maxWidth, thumbnailPreview, icons, error, children,
-  } = props;
+interface ImageSelectorProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  maxWidth: number;
+  thumbnailPreview?: React.ReactElement | null; // either <img> element or null
+  icons: any; // array of <figure> elements
+  error: string; // error message
+  children: React.ReactNode;
+}
+
+const ImageSelector = function ({
+  isOpen, closeModal, maxWidth, thumbnailPreview, icons, error, children,
+}: ImageSelectorProps) {
   return (
     <ReactModal
       isOpen={isOpen}
@@ -36,4 +44,8 @@ const ImageSelector = function (props) {
   );
 };
 
+ImageSelector.defaultProps = {
+  thumbnailPreview: null,
+};
+
 export default ImageSelector;