diff --git a/.eslintrc b/.eslintrc
index c32dbd3..d8bff98 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -34,6 +34,7 @@
       "all"
     ],
     "deprecation/deprecation": "warn",
+    "import/no-extraneous-dependencies": "off",
     "import/prefer-default-export": "off",
     "no-console": "error",
     "react/function-component-definition": [
diff --git a/src/chakra-components/containers.tsx b/src/chakra-components/containers.tsx
index de7922f..97bfb25 100644
--- a/src/chakra-components/containers.tsx
+++ b/src/chakra-components/containers.tsx
@@ -1,5 +1,6 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
-import type { SystemStyleObject } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/layout";
+import type { SystemStyleObject } from "@chakra-ui/system";
+import { useMultiStyleConfig } from "@chakra-ui/system";
 import type {
   ContainerProps,
   GroupBase,
diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index 34888c9..9e8c2b9 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -1,12 +1,9 @@
-import type { IconProps, SystemStyleObject } from "@chakra-ui/react";
-import {
-  Box,
-  Divider,
-  Icon,
-  Spinner,
-  useMultiStyleConfig,
-  useStyleConfig,
-} from "@chakra-ui/react";
+import type { IconProps } from "@chakra-ui/icon";
+import { Icon } from "@chakra-ui/icon";
+import { Box, Divider } from "@chakra-ui/layout";
+import { Spinner } from "@chakra-ui/spinner";
+import { useMultiStyleConfig, useStyleConfig } from "@chakra-ui/system";
+import type { SystemStyleObject } from "@chakra-ui/system";
 import type {
   ClearIndicatorProps,
   ControlProps,
diff --git a/src/chakra-components/input.tsx b/src/chakra-components/input.tsx
index f1f5c8f..936621b 100644
--- a/src/chakra-components/input.tsx
+++ b/src/chakra-components/input.tsx
@@ -1,5 +1,6 @@
-import { Box, chakra } from "@chakra-ui/react";
-import type { SystemStyleObject } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/layout";
+import type { SystemStyleObject } from "@chakra-ui/system";
+import { chakra } from "@chakra-ui/system";
 import type { GroupBase, InputProps } from "react-select";
 import { cleanCommonProps } from "../utils";
 
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index 014a5ca..880d08c 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -1,11 +1,7 @@
-import {
-  Box,
-  Menu as ChakraMenu,
-  MenuIcon,
-  useColorModeValue,
-  useMultiStyleConfig,
-} from "@chakra-ui/react";
-import type { PropsOf, SystemStyleObject } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/layout";
+import { Menu as ChakraMenu, MenuIcon } from "@chakra-ui/menu";
+import type { PropsOf, SystemStyleObject } from "@chakra-ui/system";
+import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/system";
 import type {
   CoercedMenuPlacement,
   GroupBase,
diff --git a/src/chakra-components/multi-value.tsx b/src/chakra-components/multi-value.tsx
index 23516df..a3eca9d 100644
--- a/src/chakra-components/multi-value.tsx
+++ b/src/chakra-components/multi-value.tsx
@@ -1,5 +1,8 @@
-import type { IconProps, SystemStyleObject } from "@chakra-ui/react";
-import { Box, Icon, chakra, useMultiStyleConfig } from "@chakra-ui/react";
+import type { IconProps } from "@chakra-ui/icon";
+import { Icon } from "@chakra-ui/icon";
+import { Box } from "@chakra-ui/layout";
+import type { SystemStyleObject } from "@chakra-ui/system";
+import { chakra, useMultiStyleConfig } from "@chakra-ui/system";
 import type {
   GroupBase,
   MultiValueGenericProps,
diff --git a/src/chakra-components/placeholder.tsx b/src/chakra-components/placeholder.tsx
index 7893c50..07016ba 100644
--- a/src/chakra-components/placeholder.tsx
+++ b/src/chakra-components/placeholder.tsx
@@ -1,5 +1,5 @@
-import { Box } from "@chakra-ui/react";
-import type { SystemStyleObject } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/layout";
+import type { SystemStyleObject } from "@chakra-ui/system";
 import type { GroupBase, PlaceholderProps } from "react-select";
 
 const Placeholder = <
diff --git a/src/chakra-components/single-value.tsx b/src/chakra-components/single-value.tsx
index 623917a..4bfb16a 100644
--- a/src/chakra-components/single-value.tsx
+++ b/src/chakra-components/single-value.tsx
@@ -1,5 +1,5 @@
-import { Box } from "@chakra-ui/react";
-import type { SystemStyleObject } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/layout";
+import type { SystemStyleObject } from "@chakra-ui/system";
 import type { GroupBase, SingleValueProps } from "react-select";
 
 const SingleValue = <
diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts
index f34cec9..b01c74e 100644
--- a/src/use-chakra-select-props.ts
+++ b/src/use-chakra-select-props.ts
@@ -1,4 +1,5 @@
-import { useFormControl, useTheme } from "@chakra-ui/react";
+import { useFormControl } from "@chakra-ui/form-control";
+import { useTheme } from "@chakra-ui/system";
 import type { GroupBase, Props } from "react-select";
 import chakraComponents from "./chakra-components";
 import type { SelectedOptionStyle } from "./types";
diff --git a/src/utils.ts b/src/utils.ts
index f97b246..520de23 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,5 @@
-import { useBreakpointValue, useTheme } from "@chakra-ui/react";
+import { useBreakpointValue } from "@chakra-ui/media-query";
+import { useTheme } from "@chakra-ui/system";
 import type { CommonPropsAndClassName, GroupBase } from "react-select";
 import type { Size, SizeProp } from "./types";
 
diff --git a/tsup.config.ts b/tsup.config.ts
index be92b69..b934a6b 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from "tsup";
 
 export default defineConfig({