diff --git a/.gitignore b/.gitignore
index 21dbd0b..7b52cf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ coverage
 yarn.lock
 /es/
 package-lock.json
+pnpm-lock.yaml
 .doc
 
 # dumi
diff --git a/docs/examples/getContainer.tsx b/docs/examples/getContainer.tsx
index 1cf2c0b..b8ee9b1 100644
--- a/docs/examples/getContainer.tsx
+++ b/docs/examples/getContainer.tsx
@@ -10,7 +10,7 @@ const Content = (): React.ReactElement => {
 };
 
 export default () => {
-  const divRef = React.useRef();
+  const divRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <div
diff --git a/package.json b/package.json
index 036c123..17c54dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/portal",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "React Portal Component",
   "keywords": [
     "react",
@@ -45,18 +45,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
-    "classnames": "^2.3.2",
-    "rc-util": "^5.24.4"
+    "@rc-component/util": "^1.2.0",
+    "classnames": "^2.3.2"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
-    "@types/jest": "^26.0.20",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
     "@types/node": "^20.9.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@umijs/fabric": "^3.0.0",
+    "cheerio": "1.0.0-rc.12",
     "dumi": "^2.0.0",
     "eslint": "^7.18.0",
     "father": "^4.0.0",
@@ -67,7 +68,6 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
-    "cheerio": "1.0.0-rc.12",
     "umi-test": "^1.9.7"
   },
   "peerDependencies": {
diff --git a/src/Portal.tsx b/src/Portal.tsx
index 5fc4d79..c8f5a6c 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
-import warning from 'rc-util/lib/warning';
-import { supportRef, useComposeRef } from 'rc-util/lib/ref';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
+import warning from '@rc-component/util/lib/warning';
+import { supportRef, useComposeRef } from '@rc-component/util/lib/ref';
 import OrderContext from './Context';
 import useDom from './useDom';
 import useScrollLocker from './useScrollLocker';
@@ -26,7 +26,6 @@ export interface PortalProps {
   autoDestroy?: boolean;
   /** Lock screen scroll when open */
   autoLock?: boolean;
-
   /** @private debug name. Do not use in prod */
   debug?: string;
 }
@@ -125,10 +124,9 @@ const Portal = React.forwardRef<any, PortalProps>((props, ref) => {
   const renderInline = mergedContainer === false || inlineMock();
 
   let reffedChildren = children;
+
   if (ref) {
-    reffedChildren = React.cloneElement(children as any, {
-      ref: mergedRef,
-    });
+    reffedChildren = React.cloneElement(children as any, { ref: mergedRef });
   }
 
   return (
diff --git a/src/useDom.tsx b/src/useDom.tsx
index 784aaae..a64b77d 100644
--- a/src/useDom.tsx
+++ b/src/useDom.tsx
@@ -1,19 +1,19 @@
 import * as React from 'react';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
 import OrderContext from './Context';
 import type { QueueCreate } from './Context';
 
-const EMPTY_LIST = [];
+const EMPTY_LIST: VoidFunction[] = [];
 
 /**
  * Will add `div` to document. Nest call will keep order
  * @param render Render DOM in document
  */
-export default function useDom(
+const useDom = (
   render: boolean,
   debug?: string,
-): [HTMLDivElement, QueueCreate] {
+): [HTMLDivElement, QueueCreate] => {
   const [ele] = React.useState(() => {
     if (!canUseDom()) {
       return null;
@@ -82,4 +82,6 @@ export default function useDom(
   }, [queue]);
 
   return [ele, mergedQueueCreate];
-}
+};
+
+export default useDom;
diff --git a/src/useScrollLocker.tsx b/src/useScrollLocker.tsx
index febc78b..e386f30 100644
--- a/src/useScrollLocker.tsx
+++ b/src/useScrollLocker.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { updateCSS, removeCSS } from 'rc-util/lib/Dom/dynamicCSS';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
+import { updateCSS, removeCSS } from '@rc-component/util/lib/Dom/dynamicCSS';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import { getTargetScrollBarSize } from '@rc-component/util/lib/getScrollBarSize';
 import { isBodyOverflowing } from './util';
 
-const UNIQUE_ID = `rc-util-locker-${Date.now()}`;
+const UNIQUE_ID = `@rc-component/util-locker-${Date.now()}`;
 
 let uuid = 0;
 
-export default function useScrollLocker(lock?: boolean) {
+const useScrollLocker = (lock?: boolean) => {
   const mergedLock = !!lock;
   const [id] = React.useState(() => {
     uuid += 1;
@@ -36,4 +36,6 @@ html body {
       removeCSS(id);
     };
   }, [mergedLock, id]);
-}
+};
+
+export default useScrollLocker;
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index c433ea0..5e3243f 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -13,7 +13,7 @@ jest.mock('../src/util', () => {
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
   const origin = jest.requireActual('react');
   return origin.useLayoutEffect;
 });
@@ -72,7 +72,7 @@ describe('Portal', () => {
       };
 
       const Demo = () => {
-        const divRef = React.useRef();
+        const divRef = React.useRef<HTMLDivElement>(null);
 
         return (
           <div ref={divRef} className="holder">
@@ -231,7 +231,7 @@ describe('Portal', () => {
     let checked = false;
 
     const Demo = ({ open }: { open?: boolean }) => {
-      const pRef = React.useRef();
+      const pRef = React.useRef<HTMLParagraphElement>(null);
 
       React.useEffect(() => {
         if (open) {
diff --git a/tests/webkit.test.tsx b/tests/webkit.test.tsx
index 48757a2..7fc95ca 100644
--- a/tests/webkit.test.tsx
+++ b/tests/webkit.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Portal from '../src';
-import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 jest.mock('../src/util', () => {
   const origin = jest.requireActual('../src/util');
@@ -12,14 +11,14 @@ jest.mock('../src/util', () => {
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/hooks/useLayoutEffect', () => {
+jest.mock('@rc-component/util/lib/hooks/useLayoutEffect', () => {
   const origin = jest.requireActual('react');
   return origin.useLayoutEffect;
 });
 
 // Revert `useLayoutEffect` back to real one since we should keep order for test
-jest.mock('rc-util/lib/getScrollBarSize', () => {
-  const origin = jest.requireActual('rc-util/lib/getScrollBarSize');
+jest.mock('@rc-component/util/lib/getScrollBarSize', () => {
+  const origin = jest.requireActual('@rc-component/util/lib/getScrollBarSize');
   return {
     ...origin,