diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..1689524
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/example/package-lock.json b/example/package-lock.json
index 82ff546..2e108ff 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -27,10 +27,10 @@
       "version": "0.3.8",
       "license": "MIT",
       "devDependencies": {
-        "@testing-library/jest-dom": "^5.12.0",
-        "@testing-library/react": "^11.2.6",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.1.8",
-        "@types/jest": "^26.0.23",
+        "@types/jest": "^27.5.1",
         "@types/node": "^15.0.1",
         "@types/react": "^18.0.5",
         "@types/react-dom": "^18.0.1",
@@ -379,10 +379,10 @@
     "gantt-task-react": {
       "version": "file:..",
       "requires": {
-        "@testing-library/jest-dom": "^5.12.0",
-        "@testing-library/react": "^11.2.6",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.1.8",
-        "@types/jest": "^26.0.23",
+        "@types/jest": "^27.5.1",
         "@types/node": "^15.0.1",
         "@types/react": "^18.0.5",
         "@types/react-dom": "^18.0.1",
diff --git a/example/src/App.test.tsx b/example/src/App.test.tsx
index 23c181f..efd6370 100644
--- a/example/src/App.test.tsx
+++ b/example/src/App.test.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<App />);
 });
diff --git a/package-lock.json b/package-lock.json
index ffc3b6f..aeca7dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,13 @@
       "version": "0.3.8",
       "license": "MIT",
       "devDependencies": {
-        "@testing-library/jest-dom": "^5.12.0",
-        "@testing-library/react": "^11.2.6",
-        "@testing-library/user-event": "^13.1.8",
-        "@types/jest": "^26.0.23",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^14.2.1",
+        "@types/jest": "^27.5.1",
         "@types/node": "^15.0.1",
         "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
+        "@types/react-dom": "^18.0.5",
         "cross-env": "^7.0.3",
         "gh-pages": "^3.1.0",
         "microbundle-crl": "^0.13.11",
@@ -24,11 +24,11 @@
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.6.0",
-        "prettier": "^2.5.1",
-        "react": "^18.1.0",
-        "react-dom": "^18.1.0",
+        "prettier": "^2.7.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
-        "typescript": "^4.6.4"
+        "typescript": "^4.7.4"
       },
       "engines": {
         "node": ">=10"
@@ -2791,22 +2791,6 @@
         "@types/yargs-parser": "*"
       }
     },
-    "node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -3484,7 +3468,6 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
       "integrity": "sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3535,79 +3518,30 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "11.2.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
-      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz",
+      "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^7.28.1"
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
-      "version": "7.31.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
-      "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
-        "lz-string": "^1.4.4",
-        "pretty-format": "^26.6.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@testing-library/react/node_modules/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/@testing-library/react/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       }
     },
     "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.2.1.tgz",
+      "integrity": "sha512-HOr1QiODrq+0j9lKU5i10y9TbhxMBMRMGimNx10asdmau9cb8Xb1Vyg0GvTwyIL2ziQyh2kAloOtAQFBQVuecA==",
       "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
       "engines": {
-        "node": ">=10",
+        "node": ">=12",
         "npm": ">=6"
       },
       "peerDependencies": {
@@ -3815,28 +3749,13 @@
       }
     },
     "node_modules/@types/jest": {
-      "version": "26.0.24",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
-      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-fUy7YRpT+rHXto1YlL+J9rs0uLGyiqVt3ZOTQR+4ROc47yNl8WLdVLgUloBRhOxP1PZvguHl44T3H0wAWxahYQ==",
       "dev": true,
       "dependencies": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      }
-    },
-    "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
+        "jest-matcher-utils": "^27.0.0",
+        "pretty-format": "^27.0.0"
       }
     },
     "node_modules/@types/json-schema": {
@@ -3911,9 +3830,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
-      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -3998,15 +3917,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/yargs": {
-      "version": "15.0.14",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-      "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
     "node_modules/@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
@@ -7786,15 +7696,6 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
-    "node_modules/diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -11372,36 +11273,6 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-diff/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/jest-docblock": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
@@ -11549,15 +11420,6 @@
         "@types/yargs-parser": "*"
       }
     },
-    "node_modules/jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
     "node_modules/jest-haste-map": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
@@ -16609,9 +16471,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -16883,9 +16745,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
-      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -17088,16 +16950,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
-      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.22.0"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "^18.1.0"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-error-overlay": {
@@ -18245,9 +18107,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
-      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -19717,9 +19579,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
-      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -22876,19 +22738,6 @@
         }
       }
     },
-    "@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      }
-    },
     "@jridgewell/gen-mapping": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -23327,7 +23176,6 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
       "integrity": "sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -23369,63 +23217,22 @@
       }
     },
     "@testing-library/react": {
-      "version": "11.2.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
-      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz",
+      "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^7.28.1"
-      },
-      "dependencies": {
-        "@testing-library/dom": {
-          "version": "7.31.2",
-          "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
-          "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/runtime": "^7.12.5",
-            "@types/aria-query": "^4.2.0",
-            "aria-query": "^4.2.2",
-            "chalk": "^4.1.0",
-            "dom-accessibility-api": "^0.5.6",
-            "lz-string": "^1.4.4",
-            "pretty-format": "^26.6.2"
-          }
-        },
-        "aria-query": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-          "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.10.2",
-            "@babel/runtime-corejs3": "^7.10.2"
-          }
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        }
+        "@testing-library/dom": "^8.5.0",
+        "@types/react-dom": "^18.0.0"
       }
     },
     "@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.2.1.tgz",
+      "integrity": "sha512-HOr1QiODrq+0j9lKU5i10y9TbhxMBMRMGimNx10asdmau9cb8Xb1Vyg0GvTwyIL2ziQyh2kAloOtAQFBQVuecA==",
       "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      }
+      "requires": {}
     },
     "@tootallnate/once": {
       "version": "1.1.2",
@@ -23622,27 +23429,13 @@
       }
     },
     "@types/jest": {
-      "version": "26.0.24",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
-      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.1.tgz",
+      "integrity": "sha512-fUy7YRpT+rHXto1YlL+J9rs0uLGyiqVt3ZOTQR+4ROc47yNl8WLdVLgUloBRhOxP1PZvguHl44T3H0wAWxahYQ==",
       "dev": true,
       "requires": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      },
-      "dependencies": {
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        }
+        "jest-matcher-utils": "^27.0.0",
+        "pretty-format": "^27.0.0"
       }
     },
     "@types/json-schema": {
@@ -23717,9 +23510,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "18.0.4",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
-      "integrity": "sha512-FgTtbqPOCI3dzZPZoC2T/sx3L34qxy99ITWn4eoSA95qPyXDMH0ALoAqUp49ITniiJFsXUVBtalh/KffMpg21Q==",
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.5.tgz",
+      "integrity": "sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -23804,15 +23597,6 @@
         "@types/node": "*"
       }
     },
-    "@types/yargs": {
-      "version": "15.0.14",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-      "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
-      "dev": true,
-      "requires": {
-        "@types/yargs-parser": "*"
-      }
-    },
     "@types/yargs-parser": {
       "version": "21.0.0",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
@@ -26630,12 +26414,6 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
-    "diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true
-    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -29363,32 +29141,6 @@
         }
       }
     },
-    "jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        }
-      }
-    },
     "jest-docblock": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.5.1.tgz",
@@ -29518,12 +29270,6 @@
         }
       }
     },
-    "jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true
-    },
     "jest-haste-map": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
@@ -33455,9 +33201,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
     "pretty-bytes": {
@@ -33656,9 +33402,9 @@
       }
     },
     "react": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.1.0.tgz",
-      "integrity": "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
@@ -33803,13 +33549,13 @@
       }
     },
     "react-dom": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",
-      "integrity": "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.22.0"
+        "scheduler": "^0.23.0"
       }
     },
     "react-error-overlay": {
@@ -34676,9 +34422,9 @@
       }
     },
     "scheduler": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.22.0.tgz",
-      "integrity": "sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
@@ -35833,9 +35579,9 @@
       }
     },
     "typescript": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.4.tgz",
-      "integrity": "sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
+      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
       "dev": true
     },
     "unbox-primitive": {
diff --git a/package.json b/package.json
index b56ce51..4de25b4 100644
--- a/package.json
+++ b/package.json
@@ -39,13 +39,13 @@
     "react": "^18.0.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.8",
-    "@types/jest": "^26.0.23",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@types/jest": "^27.5.1",
     "@types/node": "^15.0.1",
     "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.1",
+    "@types/react-dom": "^18.0.5",
     "cross-env": "^7.0.3",
     "gh-pages": "^3.1.0",
     "microbundle-crl": "^0.13.11",
@@ -54,11 +54,11 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^7.6.0",
-    "prettier": "^2.5.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "files": [
     "dist"
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index 2c515ec..ffcdcff 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -278,15 +278,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     };
 
     // subscribe if scroll is necessary
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener("wheel", handleWheel, {
-        passive: false,
-      });
-    }
+    wrapperRef.current?.addEventListener("wheel", handleWheel, {
+      passive: false,
+    });
     return () => {
-      if (wrapperRef.current) {
-        wrapperRef.current.removeEventListener("wheel", handleWheel);
-      }
+      wrapperRef.current?.removeEventListener("wheel", handleWheel);
     };
   }, [
     wrapperRef,
diff --git a/src/components/other/horizontal-scroll.module.css b/src/components/other/horizontal-scroll.module.css
index c9ce483..84edeae 100644
--- a/src/components/other/horizontal-scroll.module.css
+++ b/src/components/other/horizontal-scroll.module.css
@@ -1,6 +1,10 @@
 .scrollWrapper {
   overflow: auto;
   max-width: 100%;
+  /*firefox*/
+  scrollbar-width: thin;
+  /*iPad*/
+  height: 1.1rem;
 }
 .scrollWrapper::-webkit-scrollbar {
   width: 1.1rem;
diff --git a/src/components/other/vertical-scroll.module.css b/src/components/other/vertical-scroll.module.css
index d633ce3..7e9c654 100644
--- a/src/components/other/vertical-scroll.module.css
+++ b/src/components/other/vertical-scroll.module.css
@@ -2,6 +2,8 @@
   overflow: hidden auto;
   width: 17px;
   flex-shrink: 0;
+  /*firefox*/
+  scrollbar-width: thin;
 }
 .scroll::-webkit-scrollbar {
   width: 1.1rem;
diff --git a/src/test/gant.test.tsx b/src/test/gant.test.tsx
index 8c4c4c5..75b2e21 100644
--- a/src/test/gant.test.tsx
+++ b/src/test/gant.test.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Gantt } from "../index";
 
 describe("gantt", () => {
   it("renders without crashing", () => {
     const div = document.createElement("div");
-    ReactDOM.render(
+    const root = createRoot(div);
+    root.render(
       <Gantt
         tasks={[
           {
@@ -17,9 +18,7 @@ describe("gantt", () => {
             type: "task",
           },
         ]}
-      />,
-      div
+      />
     );
-    ReactDOM.unmountComponentAtNode(div);
   });
 });