diff --git a/LICENSE b/LICENSE
index da5eede..cc3b16d 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Francisco Hodge
+Copyright (c) 2023 KeyValue Software Systems
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 221610f..13da0fa 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,8 @@ npm install  @keyvaluesystems/react-multi-selection-ui-component
 
 You’ll need to install React separately since it isn't included in the package.
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
 
 React Multi Selection UI can run in a very basic mode by just providing the `options` like given below:
@@ -276,9 +278,9 @@ To customize the style of various components, you can use the following prop nam
 
 You can utilize the provided prop names to customize the style of individual items in the chip or each item in the menu. This can be achieved by passing a function that returns the desired style for each element.
 
-- `ChipComponent` - overrides the chip style
-- `SelectedMenuItem` - overrides the selected menu item styles
-- `UnSelectedMenuItem` - overrides the non selected item styles
+- `ChipComponent` - Overrides the chip style
+- `SelectedMenuItem` - Overrides the selected menu item styles
+- `UnSelectedMenuItem` - Overrides the non selected item styles
 
 ## Icon Customizations
 
@@ -297,7 +299,7 @@ The following code displays the icons that can be customized
 />
 ```
 
-- `Arrow` - override the down arrow(right)
-- `ChipClose` - overrides the chip close icon
-- `Checked` - override the checkbox checked icon
-- `Search` - override the search icon
+- `Arrow` - Overrides the down arrow(right)
+- `ChipClose` - Overrides the chip close icon
+- `Checked` - Overrides the checkbox checked icon
+- `Search` - Overrides the search icon
diff --git a/package-lock.json b/package-lock.json
index 44d5fbb..df33987 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "@keyvaluesystems/react-multi-selection-ui-component",
       "version": "1.0.0",
+      "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.20.7",
         "@babel/core": "^7.20.12",
diff --git a/package.json b/package.json
index e2773bc..3755bf6 100644
--- a/package.json
+++ b/package.json
@@ -24,12 +24,13 @@
     "url": "https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui"
   },
   "author": "Keyvalue",
-  "license": "",
+  "license": "MIT",
   "homepage": "https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui",
   "keywords": [
     "library",
     "starter",
-    "es6"
+    "es6",
+    "nextjs"
   ],
   "devDependencies": {
     "@babel/cli": "^7.20.7",
diff --git a/src/lib/multi-select/multiSelect.tsx b/src/lib/multi-select/multiSelect.tsx
index e874a59..fc0dbc7 100644
--- a/src/lib/multi-select/multiSelect.tsx
+++ b/src/lib/multi-select/multiSelect.tsx
@@ -44,7 +44,7 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
   //ref for the modal
   const modalRef = useRef<HTMLDivElement>(null);
   // ref for the container having chips,search bar and arrow
-  const interactableAreaRef = useRef<HTMLDivElement>(null);
+  const intractableAreaRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setList(options);
@@ -55,12 +55,11 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
   }, [options]);
 
   useEffect(() => {
-    if (typeof document !== undefined) {
+    if (typeof document!== undefined) {
       document.addEventListener("mouseup", onMouseUp);
-
       return () => document.removeEventListener("mouseup", onMouseUp);
     }
-  }, [document]);
+  }, []);
 
   const handleSearch = (value: string): void => {
     if (onSearch) {
@@ -114,12 +113,11 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
     if (
       event.target instanceof Node &&
       !modalRef?.current?.contains(event.target) &&
-      !interactableAreaRef?.current?.contains(event.target)
+      !intractableAreaRef?.current?.contains(event.target)
     ) {
       // to close the dropdown modal on clicking outside the modal and the search bar
       setIsModalVisible(false);
       setShowAllChips(false);
-      return;
     }
   };
 
@@ -137,11 +135,12 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
     <div className={classes.container} style={styles[Elements.Container]}>
       <div
         className={`${classes.box} ${hasError && classes.errorBorder}`}
-        ref={interactableAreaRef}
+        ref={intractableAreaRef}
         style={styles[Elements.InputBox]}
         onClick={(): void => {
           setShowAllChips(true);
         }}
+        role="presentation"
       >
         <div className={classes.headSection}>
           {showChips && (
@@ -176,7 +175,7 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
           id="down-arrow"
         >
           <img
-            src={Arrow || DownArrow}
+            src={Arrow ?? DownArrow}
             className={classes.rotation}
             style={{
               transform: `rotate(${isModalVisible ? "180deg" : "0deg"})`,
diff --git a/webpack.config.js b/webpack.config.js
index 702fffc..621e153 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -32,7 +32,8 @@ module.exports = {
     path: path.resolve(__dirname, 'build'),
     library: "Multi Select Component",
     libraryTarget: 'umd',
-    clean: true
+    clean: true,
+    globalObject: 'this',
   },
   optimization: {
     minimize: true,