diff --git a/example/package-lock.json b/example/package-lock.json
index 22bff44..aae7689 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -20,7 +20,7 @@
       }
     },
     "@testing-library/jest-dom": {
-      "version": "file:../node_modules/@testing-library/jest-dom",
+      "version": "file:https:/registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
       "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
@@ -292,7 +292,7 @@
       }
     },
     "@testing-library/react": {
-      "version": "file:../node_modules/@testing-library/react",
+      "version": "file:https:/registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
       "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
@@ -611,11 +611,11 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "file:../node_modules/@testing-library/user-event",
+      "version": "file:https:/registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
       "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/jest": {
-      "version": "file:../node_modules/@types/jest",
+      "version": "file:https:/registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz",
       "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==",
       "requires": {
         "jest-diff": "^25.2.1",
@@ -756,11 +756,11 @@
       }
     },
     "@types/node": {
-      "version": "file:../node_modules/@types/node",
+      "version": "file:https:/registry.npmjs.org/@types/node/-/node-12.20.6.tgz",
       "integrity": "sha512-sRVq8d+ApGslmkE9e3i+D3gFGk7aZHAT+G4cIpIEdLJYPsWiSPwcAnJEjddLQQDqV3Ra2jOclX/Sv6YrvGYiWA=="
     },
     "@types/react": {
-      "version": "file:../node_modules/@types/react",
+      "version": "file:https:/registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
       "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
       "requires": {
         "@types/prop-types": "*",
@@ -786,7 +786,7 @@
       }
     },
     "@types/react-dom": {
-      "version": "file:../node_modules/@types/react-dom",
+      "version": "file:https:/registry.npmjs.org/@types/react-dom/-/react-dom-16.9.11.tgz",
       "integrity": "sha512-3UuR4MoWf5spNgrG6cwsmT9DdRghcR4IDFOzNZ6+wcmacxkFykcb5ji0nNVm9ckBT4BCxvCrJJbM4+EYsEEVIg==",
       "requires": {
         "@types/react": "^16"
@@ -3516,8 +3516,7 @@
           }
         },
         "@testing-library/jest-dom": {
-          "version": "4.2.4",
-          "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+          "version": "file:https:/registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
           "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
           "requires": {
             "@babel/runtime": "^7.5.1",
@@ -3529,21 +3528,21 @@
             "lodash": "^4.17.11",
             "pretty-format": "^24.0.0",
             "redent": "^3.0.0"
-          }
+          },
+          "dependencies": {}
         },
         "@testing-library/react": {
-          "version": "9.5.0",
-          "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+          "version": "file:https:/registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
           "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
           "requires": {
             "@babel/runtime": "^7.8.4",
             "@testing-library/dom": "^6.15.0",
             "@types/testing-library__react": "^9.1.2"
-          }
+          },
+          "dependencies": {}
         },
         "@testing-library/user-event": {
-          "version": "7.2.1",
-          "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+          "version": "file:https:/registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
           "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
         },
         "@types/anymatch": {
@@ -3647,114 +3646,13 @@
           }
         },
         "@types/jest": {
-          "version": "25.2.3",
-          "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz",
+          "version": "file:https:/registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz",
           "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==",
           "requires": {
             "jest-diff": "^25.2.1",
             "pretty-format": "^25.2.1"
           },
-          "dependencies": {
-            "@jest/types": {
-              "version": "25.5.0",
-              "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
-              "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
-              "requires": {
-                "@types/istanbul-lib-coverage": "^2.0.0",
-                "@types/istanbul-reports": "^1.1.1",
-                "@types/yargs": "^15.0.0",
-                "chalk": "^3.0.0"
-              }
-            },
-            "@types/yargs": {
-              "version": "15.0.13",
-              "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
-              "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
-              "requires": {
-                "@types/yargs-parser": "*"
-              }
-            },
-            "ansi-regex": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-              "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
-            },
-            "ansi-styles": {
-              "version": "4.3.0",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-              "requires": {
-                "color-convert": "^2.0.1"
-              }
-            },
-            "chalk": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-              "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-              "requires": {
-                "ansi-styles": "^4.1.0",
-                "supports-color": "^7.1.0"
-              }
-            },
-            "color-convert": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-              "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-              "requires": {
-                "color-name": "~1.1.4"
-              }
-            },
-            "color-name": {
-              "version": "1.1.4",
-              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-              "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-            },
-            "diff-sequences": {
-              "version": "25.2.6",
-              "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.2.6.tgz",
-              "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg=="
-            },
-            "has-flag": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-            },
-            "jest-diff": {
-              "version": "25.5.0",
-              "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.5.0.tgz",
-              "integrity": "sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==",
-              "requires": {
-                "chalk": "^3.0.0",
-                "diff-sequences": "^25.2.6",
-                "jest-get-type": "^25.2.6",
-                "pretty-format": "^25.5.0"
-              }
-            },
-            "jest-get-type": {
-              "version": "25.2.6",
-              "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.2.6.tgz",
-              "integrity": "sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig=="
-            },
-            "pretty-format": {
-              "version": "25.5.0",
-              "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
-              "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
-              "requires": {
-                "@jest/types": "^25.5.0",
-                "ansi-regex": "^5.0.0",
-                "ansi-styles": "^4.0.0",
-                "react-is": "^16.12.0"
-              }
-            },
-            "supports-color": {
-              "version": "7.2.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
-          }
+          "dependencies": {}
         },
         "@types/json-schema": {
           "version": "7.0.7",
@@ -3772,8 +3670,7 @@
           "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
         },
         "@types/node": {
-          "version": "12.20.6",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.6.tgz",
+          "version": "file:https:/registry.npmjs.org/@types/node/-/node-12.20.6.tgz",
           "integrity": "sha512-sRVq8d+ApGslmkE9e3i+D3gFGk7aZHAT+G4cIpIEdLJYPsWiSPwcAnJEjddLQQDqV3Ra2jOclX/Sv6YrvGYiWA=="
         },
         "@types/normalize-package-data": {
@@ -3802,22 +3699,22 @@
           "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
         },
         "@types/react": {
-          "version": "16.14.5",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
+          "version": "file:https:/registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
           "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
           "requires": {
             "@types/prop-types": "*",
             "@types/scheduler": "*",
             "csstype": "^3.0.2"
-          }
+          },
+          "dependencies": {}
         },
         "@types/react-dom": {
-          "version": "16.9.11",
-          "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.11.tgz",
+          "version": "file:https:/registry.npmjs.org/@types/react-dom/-/react-dom-16.9.11.tgz",
           "integrity": "sha512-3UuR4MoWf5spNgrG6cwsmT9DdRghcR4IDFOzNZ6+wcmacxkFykcb5ji0nNVm9ckBT4BCxvCrJJbM4+EYsEEVIg==",
           "requires": {
             "@types/react": "^16"
-          }
+          },
+          "dependencies": {}
         },
         "@types/resolve": {
           "version": "0.0.8",
@@ -16156,14 +16053,8 @@
           }
         },
         "react": {
-          "version": "16.14.0",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2"
-          }
+          "version": "file:https:/registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g=="
         },
         "react-app-polyfill": {
           "version": "2.0.0",
@@ -16323,15 +16214,8 @@
           }
         },
         "react-dom": {
-          "version": "16.14.0",
-          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "scheduler": "^0.19.1"
-          }
+          "version": "file:https:/registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+          "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw=="
         },
         "react-error-overlay": {
           "version": "6.0.9",
@@ -16349,158 +16233,8 @@
           "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
         },
         "react-scripts": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
-          "integrity": "sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==",
-          "requires": {
-            "@babel/core": "7.12.3",
-            "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
-            "@svgr/webpack": "5.5.0",
-            "@typescript-eslint/eslint-plugin": "^4.5.0",
-            "@typescript-eslint/parser": "^4.5.0",
-            "babel-eslint": "^10.1.0",
-            "babel-jest": "^26.6.0",
-            "babel-loader": "8.1.0",
-            "babel-plugin-named-asset-import": "^0.3.7",
-            "babel-preset-react-app": "^10.0.0",
-            "bfj": "^7.0.2",
-            "camelcase": "^6.1.0",
-            "case-sensitive-paths-webpack-plugin": "2.3.0",
-            "css-loader": "4.3.0",
-            "dotenv": "8.2.0",
-            "dotenv-expand": "5.1.0",
-            "eslint": "^7.11.0",
-            "eslint-config-react-app": "^6.0.0",
-            "eslint-plugin-flowtype": "^5.2.0",
-            "eslint-plugin-import": "^2.22.1",
-            "eslint-plugin-jest": "^24.1.0",
-            "eslint-plugin-jsx-a11y": "^6.3.1",
-            "eslint-plugin-react": "^7.21.5",
-            "eslint-plugin-react-hooks": "^4.2.0",
-            "eslint-plugin-testing-library": "^3.9.2",
-            "eslint-webpack-plugin": "^2.5.2",
-            "file-loader": "6.1.1",
-            "fs-extra": "^9.0.1",
-            "html-webpack-plugin": "4.5.0",
-            "identity-obj-proxy": "3.0.0",
-            "jest": "26.6.0",
-            "jest-circus": "26.6.0",
-            "jest-resolve": "26.6.0",
-            "jest-watch-typeahead": "0.6.1",
-            "mini-css-extract-plugin": "0.11.3",
-            "optimize-css-assets-webpack-plugin": "5.0.4",
-            "pnp-webpack-plugin": "1.6.4",
-            "postcss-flexbugs-fixes": "4.2.1",
-            "postcss-loader": "3.0.0",
-            "postcss-normalize": "8.0.1",
-            "postcss-preset-env": "6.7.0",
-            "postcss-safe-parser": "5.0.2",
-            "prompts": "2.4.0",
-            "react-app-polyfill": "^2.0.0",
-            "react-dev-utils": "^11.0.3",
-            "react-refresh": "^0.8.3",
-            "resolve": "1.18.1",
-            "resolve-url-loader": "^3.1.2",
-            "sass-loader": "^10.0.5",
-            "semver": "7.3.2",
-            "style-loader": "1.3.0",
-            "terser-webpack-plugin": "4.2.3",
-            "ts-pnp": "1.2.0",
-            "url-loader": "4.1.1",
-            "webpack": "4.44.2",
-            "webpack-dev-server": "3.11.1",
-            "webpack-manifest-plugin": "2.2.0",
-            "workbox-webpack-plugin": "5.1.4"
-          },
-          "dependencies": {
-            "@babel/core": {
-              "version": "7.12.3",
-              "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz",
-              "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==",
-              "requires": {
-                "@babel/code-frame": "^7.10.4",
-                "@babel/generator": "^7.12.1",
-                "@babel/helper-module-transforms": "^7.12.1",
-                "@babel/helpers": "^7.12.1",
-                "@babel/parser": "^7.12.3",
-                "@babel/template": "^7.10.4",
-                "@babel/traverse": "^7.12.1",
-                "@babel/types": "^7.12.1",
-                "convert-source-map": "^1.7.0",
-                "debug": "^4.1.0",
-                "gensync": "^1.0.0-beta.1",
-                "json5": "^2.1.2",
-                "lodash": "^4.17.19",
-                "resolve": "^1.3.2",
-                "semver": "^5.4.1",
-                "source-map": "^0.5.0"
-              },
-              "dependencies": {
-                "semver": {
-                  "version": "5.7.1",
-                  "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-                  "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
-                }
-              }
-            },
-            "camelcase": {
-              "version": "6.2.0",
-              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
-              "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
-            },
-            "fs-extra": {
-              "version": "9.1.0",
-              "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-              "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-              "requires": {
-                "at-least-node": "^1.0.0",
-                "graceful-fs": "^4.2.0",
-                "jsonfile": "^6.0.1",
-                "universalify": "^2.0.0"
-              }
-            },
-            "json5": {
-              "version": "2.2.0",
-              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-              "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            },
-            "jsonfile": {
-              "version": "6.1.0",
-              "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-              "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-              "requires": {
-                "graceful-fs": "^4.1.6",
-                "universalify": "^2.0.0"
-              }
-            },
-            "resolve": {
-              "version": "1.18.1",
-              "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
-              "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==",
-              "requires": {
-                "is-core-module": "^2.0.0",
-                "path-parse": "^1.0.6"
-              }
-            },
-            "semver": {
-              "version": "7.3.2",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-              "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
-            },
-            "source-map": {
-              "version": "0.5.7",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-              "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-            },
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
+          "version": "file:https:/registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
+          "integrity": "sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A=="
         },
         "read-pkg": {
           "version": "2.0.0",
@@ -18891,8 +18625,7 @@
           }
         },
         "typescript": {
-          "version": "3.9.9",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
+          "version": "file:https:/registry.npmjs.org/typescript/-/typescript-3.9.9.tgz",
           "integrity": "sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w=="
         },
         "unbox-primitive": {
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 732b501..5fc513d 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import "gantt-task-react/dist/index.css";
 import { Task, ViewMode, Gantt } from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
 import { initTasks } from "./helper";
+import "gantt-task-react/dist/index.css";
 
 //Init
 const App = () => {
@@ -16,14 +16,13 @@ const App = () => {
     columnWidth = 250;
   }
 
-  let onTaskChange = (task: Task) => {
+  const onTaskChange = (task: Task) => {
     console.log("On date change Id:" + task.id);
-    debugger;
     const newTasks = tasks.map(t => (t.id === task.id ? task : t));
     setTasks(newTasks);
   };
 
-  let onTaskDelete = (task: Task) => {
+  const onTaskDelete = (task: Task) => {
     const conf = window.confirm("Are you sure about " + task.name + " ?");
     if (conf) {
       setTasks(tasks.filter(t => t.id !== task.id));
@@ -31,16 +30,16 @@ const App = () => {
     return conf;
   };
 
-  let onProgressChange = async (task: Task) => {
+  const onProgressChange = async (task: Task) => {
     setTasks(tasks.map(t => (t.id === task.id ? task : t)));
     console.log("On progress change Id:" + task.id);
   };
 
-  let onDblClick = (task: Task) => {
+  const onDblClick = (task: Task) => {
     alert("On Double Click event Id:" + task.id);
   };
 
-  let onSelect = (task: Task, isSelected: boolean) => {
+  const onSelect = (task: Task, isSelected: boolean) => {
     console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
   };
 
diff --git a/example/src/helper.tsx b/example/src/helper.tsx
index 901837a..07c6b74 100644
--- a/example/src/helper.tsx
+++ b/example/src/helper.tsx
@@ -66,7 +66,7 @@ export function initTasks() {
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 24),
       end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 25),
-      name: "Closing",
+      name: "Party Time",
       id: "Task 9",
       progress: 0,
       isDisabled: true,
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index 3c84196..554d134 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -9,12 +9,12 @@ import { TaskListTableDefault } from "../task-list/task-list-table";
 import { StandardTooltipContent } from "../other/tooltip";
 import { Scroll } from "../other/scroll";
 import { TaskListProps, TaskList } from "../task-list/task-list";
-import styles from "./gantt.module.css";
 import { TaskGantt } from "./task-gantt";
 import { BarTask } from "../../types/bar-task";
 import { convertToBarTasks } from "../../helpers/bar-helper";
 import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
+import styles from "./gantt.module.css";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -63,12 +63,13 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
+
   const [scrollY, setScrollY] = useState(0);
   const [scrollX, setScrollX] = useState(0);
   const [ignoreScrollEvent, setIgnoreScrollEvent] = useState(false);
 
   const svgHeight = rowHeight * barTasks.length;
-  const gridWidth = dateSetup.dates.length * columnWidth;
+  const svgWidth = dateSetup.dates.length * columnWidth;
   const ganttFullHeight = barTasks.length * rowHeight;
 
   // task change events
@@ -226,20 +227,18 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
     if (isX) {
       if (newScrollX < 0) {
-        setScrollX(0);
-      } else if (newScrollX > gridWidth) {
-        setScrollX(gridWidth);
-      } else {
-        setScrollX(newScrollX);
+        newScrollX = 0;
+      } else if (newScrollX > svgWidth) {
+        newScrollX = svgWidth;
       }
+      setScrollX(newScrollX);
     } else {
       if (newScrollY < 0) {
-        setScrollY(0);
+        newScrollY = 0;
       } else if (newScrollY > ganttFullHeight - ganttHeight) {
-        setScrollY(ganttFullHeight - ganttHeight);
-      } else {
-        setScrollY(newScrollY);
+        newScrollY = ganttFullHeight - ganttHeight;
       }
+      setScrollY(newScrollY);
     }
     setIgnoreScrollEvent(true);
   };
@@ -265,7 +264,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
 
   const gridProps: GridProps = {
     columnWidth,
-    gridWidth,
+    svgWidth,
     tasks: tasks,
     rowHeight,
     dates: dateSetup.dates,
@@ -294,6 +293,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     fontSize,
     arrowIndent,
     svgHeight,
+    svgWidth,
     setGanttEvent,
     setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -320,7 +320,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     TaskListHeader,
     TaskListTable,
   };
-  debugger;
   return (
     <div
       className={styles.wrapper}
diff --git a/src/components/gantt/task-gantt-content.tsx b/src/components/gantt/task-gantt-content.tsx
index cdbb23a..35d5245 100644
--- a/src/components/gantt/task-gantt-content.tsx
+++ b/src/components/gantt/task-gantt-content.tsx
@@ -22,6 +22,8 @@ export type TaskGanttContentProps = {
   timeStep: number;
   svg?: React.RefObject<SVGSVGElement>;
   svgHeight: number;
+  svgWidth: number;
+  displayXEndpoint?: number;
   taskHeight: number;
   arrowColor: string;
   arrowIndent: number;
@@ -47,6 +49,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   timeStep,
   svg,
   svgHeight,
+  displayXEndpoint,
   taskHeight,
   arrowColor,
   arrowIndent,
@@ -287,11 +290,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         })}
       </g>
       <g className="toolTip">
-        {ganttEvent.changedTask && (
+        {ganttEvent.changedTask && displayXEndpoint && (
           <Tooltip
-            x={ganttEvent.changedTask.x2 + arrowIndent + arrowIndent * 0.5}
+            arrowIndent={arrowIndent}
             rowHeight={rowHeight}
             svgHeight={svgHeight}
+            displayXEndpoint={displayXEndpoint}
             task={ganttEvent.changedTask}
             fontFamily={fontFamily}
             fontSize={fontSize}
diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx
index 9e74064..ee94580 100644
--- a/src/components/gantt/task-gantt.tsx
+++ b/src/components/gantt/task-gantt.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, SyntheticEvent } from "react";
+import React, { useRef, useEffect, SyntheticEvent, useState } from "react";
 import { GridProps, Grid } from "../grid/grid";
 import { CalendarProps, Calendar } from "../calendar/calendar";
 import { TaskGanttContentProps, TaskGanttContent } from "./task-gantt-content";
@@ -25,7 +25,8 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   const ganttSVGRef = useRef<SVGSVGElement>(null);
   const horizontalContainerRef = useRef<HTMLDivElement>(null);
   const verticalContainerRef = useRef<HTMLDivElement>(null);
-  const newBarProps = { ...barProps, svg: ganttSVGRef };
+  const [displayXEndpoint, setDisplayXEndpoint] = useState(0);
+  const newBarProps = { ...barProps, svg: ganttSVGRef, displayXEndpoint };
 
   useEffect(() => {
     if (horizontalContainerRef.current) {
@@ -36,8 +37,10 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   useEffect(() => {
     if (verticalContainerRef.current) {
       verticalContainerRef.current.scrollLeft = scrollX;
+      setDisplayXEndpoint(verticalContainerRef.current.clientWidth + scrollX);
     }
-  }, [scrollX]);
+    // verticalContainerRef.current?.clientWidth need for resize window tracking
+  }, [scrollX, verticalContainerRef.current?.clientWidth]);
 
   return (
     <div
@@ -47,7 +50,7 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width={gridProps.gridWidth}
+        width={gridProps.svgWidth}
         height={calendarProps.headerHeight}
         fontFamily={barProps.fontFamily}
       >
@@ -58,13 +61,13 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
         className={styles.horizontalContainer}
         style={
           ganttHeight
-            ? { height: ganttHeight, width: gridProps.gridWidth }
-            : { width: gridProps.gridWidth }
+            ? { height: ganttHeight, width: gridProps.svgWidth }
+            : { width: gridProps.svgWidth }
         }
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={gridProps.gridWidth}
+          width={gridProps.svgWidth}
           height={barProps.rowHeight * barProps.tasks.length}
           fontFamily={barProps.fontFamily}
           ref={ganttSVGRef}
diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
index 4f0e246..cc8b8a0 100644
--- a/src/components/grid/grid-body.tsx
+++ b/src/components/grid/grid-body.tsx
@@ -6,7 +6,7 @@ import styles from "./grid.module.css";
 export type GridBodyProps = {
   tasks: Task[];
   dates: Date[];
-  gridWidth: number;
+  svgWidth: number;
   rowHeight: number;
   columnWidth: number;
   todayColor: string;
@@ -15,7 +15,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
   tasks,
   dates,
   rowHeight,
-  gridWidth,
+  svgWidth,
   columnWidth,
   todayColor,
 }) => {
@@ -26,7 +26,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
       key="RowLineFirst"
       x="0"
       y1={0}
-      x2={gridWidth}
+      x2={svgWidth}
       y2={0}
       className={styles.gridRowLine}
     />,
@@ -37,7 +37,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
         key={"Row" + task.id}
         x="0"
         y={y}
-        width={gridWidth}
+        width={svgWidth}
         height={rowHeight}
         className={styles.gridRow}
       />
@@ -47,7 +47,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
         key={"RowLine" + task.id}
         x="0"
         y1={y + rowHeight}
-        x2={gridWidth}
+        x2={svgWidth}
         y2={y + rowHeight}
         className={styles.gridRowLine}
       />
diff --git a/src/components/other/tooltip.tsx b/src/components/other/tooltip.tsx
index 8bb01c5..264a200 100644
--- a/src/components/other/tooltip.tsx
+++ b/src/components/other/tooltip.tsx
@@ -4,10 +4,11 @@ import { BarTask } from "../../types/bar-task";
 import styles from "./tooltip.module.css";
 
 export type TooltipProps = {
-  x: number;
-  svgHeight: number;
-  rowHeight: number;
   task: BarTask;
+  arrowIndent: number;
+  svgHeight: number;
+  displayXEndpoint: number;
+  rowHeight: number;
   fontSize: string;
   fontFamily: string;
   TooltipContent: React.FC<{
@@ -17,31 +18,37 @@ export type TooltipProps = {
   }>;
 };
 export const Tooltip: React.FC<TooltipProps> = ({
-  x,
+  task,
   rowHeight,
   svgHeight,
-  task,
+  displayXEndpoint,
+  arrowIndent,
   fontSize,
   fontFamily,
   TooltipContent,
 }) => {
   const tooltipRef = useRef<HTMLDivElement | null>(null);
   const [toolWidth, setToolWidth] = useState(1000);
-  const [relatedY, setRelatedY] = useState((task.index - 1) * rowHeight);
+  const [relatedY, setRelatedY] = useState(task.index * rowHeight);
+  const [relatedX, setRelatedX] = useState(displayXEndpoint);
   useEffect(() => {
     if (tooltipRef.current) {
       const tooltipHeight = tooltipRef.current.offsetHeight;
-      const tooltipY = task.index * rowHeight + rowHeight;
-      if (tooltipHeight > tooltipY) {
-        setRelatedY(tooltipHeight * 0.5);
-      } else if (tooltipY + tooltipHeight > svgHeight) {
+      const tooltipY = task.index * rowHeight;
+      if (tooltipY + tooltipHeight > svgHeight) {
         setRelatedY(svgHeight - tooltipHeight * 1.05);
       }
-      setToolWidth(tooltipRef.current.scrollWidth * 1.1);
+      const newWidth = tooltipRef.current.scrollWidth * 1.1;
+      let newRelatedX = task.x2 + arrowIndent + arrowIndent * 0.5;
+      if (newWidth + newRelatedX > displayXEndpoint) {
+        newRelatedX = task.x1 - arrowIndent - arrowIndent * 0.5 - newWidth;
+      }
+      setToolWidth(newWidth);
+      setRelatedX(newRelatedX);
     }
-  }, [tooltipRef, task]);
+  }, [tooltipRef, task, arrowIndent, displayXEndpoint]);
   return (
-    <foreignObject x={x} y={relatedY} width={toolWidth} height={1000}>
+    <foreignObject x={relatedX} y={relatedY} width={toolWidth} height={1000}>
       <div ref={tooltipRef} className={styles.tooltipDetailsContainer}>
         <TooltipContent
           task={task}
diff --git a/src/components/task-item/bar/bar.module.css b/src/components/task-item/bar/bar.module.css
index dfa1962..7ff4926 100644
--- a/src/components/task-item/bar/bar.module.css
+++ b/src/components/task-item/bar/bar.module.css
@@ -13,7 +13,6 @@
   cursor: ew-resize;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.3s ease;
 }
 
 .barBackground {