diff --git a/docs/examples/align.tsx b/docs/examples/align.tsx
index c902114d..609e725c 100644
--- a/docs/examples/align.tsx
+++ b/docs/examples/align.tsx
@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <>
diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index b3299f2c..8eaffc05 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <>
diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
index d1fca6d3..376791f2 100644
--- a/docs/examples/controlled.tsx
+++ b/docs/examples/controlled.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
 
diff --git a/docs/examples/itemRender.tsx b/docs/examples/itemRender.tsx
index 9e9a8daf..035c9c2f 100644
--- a/docs/examples/itemRender.tsx
+++ b/docs/examples/itemRender.tsx
@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const itemRender = (current, type, element) => {
   if (type === 'page') {
diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx
index 182c195b..24202353 100644
--- a/docs/examples/jumper.tsx
+++ b/docs/examples/jumper.tsx
@@ -1,9 +1,8 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 function onShowSizeChange(current, pageSize) {
   console.log(current);
@@ -18,8 +17,8 @@ function onChange(current, pageSize) {
 const App = () => (
   <>
     <h3>默认</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       defaultPageSize={20}
@@ -29,8 +28,8 @@ const App = () => (
       total={450}
     />
     <h3>禁用</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       defaultPageSize={20}
@@ -41,8 +40,8 @@ const App = () => (
       disabled
     />
     <h3>单页默认隐藏</h3>
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       onShowSizeChange={onShowSizeChange}
@@ -50,8 +49,8 @@ const App = () => (
       total={8}
     />
     <br />
-    <Pagination
-      selectComponentClass={Select}
+    <PaginationWithSizeChanger
+      // selectComponentClass={Select}
       showQuickJumper
       showSizeChanger
       onShowSizeChange={onShowSizeChange}
diff --git a/docs/examples/jumperWithGoButton.tsx b/docs/examples/jumperWithGoButton.tsx
index a2b12e5c..f63a519f 100644
--- a/docs/examples/jumperWithGoButton.tsx
+++ b/docs/examples/jumperWithGoButton.tsx
@@ -1,9 +1,9 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 class App extends React.Component {
   onShowSizeChange = (current, pageSize) => {
@@ -20,8 +20,8 @@ class App extends React.Component {
     return (
       <>
         <p> customize node </p>
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger
           showQuickJumper={{ goButton: <button type="button">确定</button> }}
           defaultPageSize={20}
diff --git a/docs/examples/lessPages.tsx b/docs/examples/lessPages.tsx
index 13116c2b..63831387 100644
--- a/docs/examples/lessPages.tsx
+++ b/docs/examples/lessPages.tsx
@@ -1,6 +1,6 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 const arrowPath =
diff --git a/docs/examples/locale.tsx b/docs/examples/locale.tsx
index c48e93b8..61490186 100644
--- a/docs/examples/locale.tsx
+++ b/docs/examples/locale.tsx
@@ -1,10 +1,9 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import localeInfo from '../../src/locale/en_US';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 function onShowSizeChange(current, pageSize) {
   console.log(current);
@@ -17,8 +16,8 @@ function onChange(current, pageSize) {
 }
 
 const App = () => (
-  <Pagination
-    selectComponentClass={Select}
+  <PaginationWithSizeChanger
+    // selectComponentClass={Select}
     showQuickJumper
     showSizeChanger
     defaultPageSize={20}
diff --git a/docs/examples/more.tsx b/docs/examples/more.tsx
index b8f3039c..2c0937ea 100644
--- a/docs/examples/more.tsx
+++ b/docs/examples/more.tsx
@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 const App = () => (
   <Pagination className="ant-pagination" defaultCurrent={3} total={450} />
diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx
index b086391a..ff9059fc 100644
--- a/docs/examples/showSizeChanger.tsx
+++ b/docs/examples/showSizeChanger.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import Pagination from 'rc-pagination';
-import Select from 'rc-select';
 import '../../assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 export default () => {
   const onPageSizeOnChange = (value) => {
@@ -10,31 +9,31 @@ export default () => {
 
   return (
     <>
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
         total={50}
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
         showSizeChanger={false}
       />
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
         total={50}
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
         showSizeChanger
       />
-      <Pagination
+      <PaginationWithSizeChanger
         defaultCurrent={1}
-        total={50}
-        selectComponentClass={Select}
-        showSizeChanger={{
+        showSizeChanger
+        // selectComponentClass={Select}
+        sizeChangerProps={{
           options: [
-            { value: '10', label: '10 条每页' },
-            { value: '25', label: '25 条每页' },
-            { value: '100', label: '100 条每页' },
+            { value: 10, label: '10 条每页' },
+            { value: 25, label: '25 条每页' },
+            { value: 100, label: '100 条每页' },
           ],
-          className: 'my-select',
-          showSearch: true,
-          onChange: onPageSizeOnChange,
+          // className: 'my-select',
+          // showSearch: true,
+          // onChange: onPageSizeOnChange,
         }}
       />
     </>
diff --git a/docs/examples/showTitle.tsx b/docs/examples/showTitle.tsx
index ff581328..d76c713e 100644
--- a/docs/examples/showTitle.tsx
+++ b/docs/examples/showTitle.tsx
@@ -1,6 +1,6 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 class App extends React.Component {
diff --git a/docs/examples/showTotal.tsx b/docs/examples/showTotal.tsx
index 25cd1c72..b7a7c042 100644
--- a/docs/examples/showTotal.tsx
+++ b/docs/examples/showTotal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 import '../../assets/index.less';
 
 const App = () => (
diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx
index beeba080..f0c9faf5 100644
--- a/docs/examples/simple.tsx
+++ b/docs/examples/simple.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import Pagination from 'rc-pagination';
-import Select from 'rc-select';
+import Pagination from '../../src';
 import '../../assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 export default () => {
   const [pageIndex, setPageIndex] = useState(1);
@@ -32,24 +32,24 @@ export default () => {
         showTotal={(total) => `Total ${total} items`}
       />
       <br />
-      <Pagination
+      <PaginationWithSizeChanger
         simple
         defaultCurrent={1}
         total={50}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
       />
       <hr />
       <a href="https://github.com/ant-design/ant-design/issues/46671">
         Antd #46671
       </a>
-      <Pagination
+      <PaginationWithSizeChanger
         simple
         defaultCurrent={1}
         total={50}
         showSizeChanger
         showQuickJumper
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
       />
     </>
   );
diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx
index 19212bc2..f60f0330 100644
--- a/docs/examples/sizer.tsx
+++ b/docs/examples/sizer.tsx
@@ -1,9 +1,8 @@
 /* eslint func-names: 0, no-console: 0 */
 import React from 'react';
-import Select from 'rc-select';
-import Pagination from 'rc-pagination';
 import '../../assets/index.less';
 import 'rc-select/assets/index.less';
+import PaginationWithSizeChanger from './utils/commonUtil';
 
 class App extends React.Component {
   state = {
@@ -19,30 +18,30 @@ class App extends React.Component {
     const { pageSize } = this.state;
     return (
       <div style={{ margin: 10 }}>
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={40}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={50}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
           defaultCurrent={3}
           total={60}
         />
-        <Pagination
-          selectComponentClass={Select}
+        <PaginationWithSizeChanger
+          // selectComponentClass={Select}
           showSizeChanger={false}
           pageSize={pageSize}
           onShowSizeChange={this.onShowSizeChange}
diff --git a/docs/examples/styles.tsx b/docs/examples/styles.tsx
index e05597dc..fa85c714 100644
--- a/docs/examples/styles.tsx
+++ b/docs/examples/styles.tsx
@@ -1,6 +1,6 @@
 import '../../assets/index.less';
 import React from 'react';
-import Pagination from 'rc-pagination';
+import Pagination from '../../src';
 
 export default () => (
   <Pagination defaultCurrent={2} total={25} style={{ margin: '100px' }} />
diff --git a/docs/examples/utils/commonUtil.tsx b/docs/examples/utils/commonUtil.tsx
new file mode 100644
index 00000000..b40ec64f
--- /dev/null
+++ b/docs/examples/utils/commonUtil.tsx
@@ -0,0 +1,49 @@
+import type { PaginationProps } from 'rc-pagination';
+import Pagination from '../../../src';
+import Select from 'rc-select';
+import React from 'react';
+
+export const getSizeChangerRender = (selectProps?: any) => {
+  const render: PaginationProps['sizeChangerRender'] = ({
+    disabled,
+    size: pageSize,
+    onSizeChange,
+    'aria-label': ariaLabel,
+    className,
+    options,
+  }) => (
+    <Select
+      disabled={disabled}
+      // prefixCls={selectPrefixCls}
+      showSearch={false}
+      // optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
+      // popupMatchSelectWidth={false}
+      dropdownMatchSelectWidth={false}
+      value={pageSize || options[0].value}
+      getPopupContainer={(triggerNode) => triggerNode.parentNode}
+      aria-label={ariaLabel}
+      defaultOpen={false}
+      // {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
+      className={className}
+      options={options}
+      onChange={onSizeChange}
+      {...selectProps}
+    />
+  );
+
+  return render;
+};
+
+export default function PaginationWithSizeChanger({
+  sizeChangerProps,
+  ...props
+}: Omit<PaginationProps, 'sizeChangerRender'> & {
+  sizeChangerProps?: any;
+}) {
+  return (
+    <Pagination
+      {...props}
+      sizeChangerRender={getSizeChangerRender(sizeChangerProps)}
+    />
+  );
+}
diff --git a/jest.config.js b/jest.config.js
index f1134def..7e2198c2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,8 +1,6 @@
-const pkg = require('./package.json');
 module.exports = {
   setupFilesAfterEnv: ['<rootDir>/tests/setupAfterEnv.ts'],
   moduleNameMapper: {
-    [pkg.name]: '<rootDir>/src/index.ts',
     '\\.less$': 'identity-obj-proxy',
   },
   collectCoverageFrom: ['src/**', '!src/locale/**'],
diff --git a/package.json b/package.json
index 57822d99..5c6bfae0 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "lint-staged": "^15.0.2",
     "np": "^10.0.5",
     "prettier": "^3.1.0",
-    "rc-select": "^14.1.2",
+    "rc-select": "^14.16.4",
     "rc-test": "^7.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/src/Options.tsx b/src/Options.tsx
index 6973b568..6efe6930 100644
--- a/src/Options.tsx
+++ b/src/Options.tsx
@@ -1,16 +1,28 @@
-import type { SelectProps } from 'rc-select';
-import type { OptionProps } from 'rc-select/es/Option';
+// import type { SelectProps } from 'rc-select';
+// import type { OptionProps } from 'rc-select/es/Option';
 import KEYCODE from 'rc-util/lib/KeyCode';
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import React from 'react';
-import type { PaginationLocale, PaginationProps } from './interface';
-
-interface InternalSelectProps extends SelectProps {
-  /**
-   * form antd v5.5.0, popupMatchSelectWidth default is true
-   */
-  popupMatchSelectWidth?: boolean;
-}
+import type { PaginationLocale } from './interface';
+
+// interface InternalSelectProps extends SelectProps {
+//   /**
+//    * form antd v5.5.0, popupMatchSelectWidth default is true
+//    */
+//   popupMatchSelectWidth?: boolean;
+// }
+
+export type SizeChangerRender = (info: {
+  disabled: boolean;
+  size: number;
+  onSizeChange: (value: string | number) => void;
+  'aria-label': string;
+  className: string;
+  options: {
+    label: string;
+    value: string | number;
+  }[];
+}) => React.ReactNode;
 
 interface OptionsProps {
   disabled?: boolean;
@@ -18,18 +30,20 @@ interface OptionsProps {
   rootPrefixCls: string;
   selectPrefixCls?: string;
   pageSize: number;
-  pageSizeOptions?: (string | number)[];
+  pageSizeOptions?: number[];
   goButton?: boolean | string;
   changeSize?: (size: number) => void;
   quickGo?: (value: number) => void;
-  buildOptionText?: (value: string | number) => string;
-  selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
-    Option?: React.ComponentType<Partial<OptionProps>>;
-  };
-  showSizeChanger: PaginationProps['showSizeChanger'];
+  buildOptionText?: (value: number | string) => string;
+  // selectComponentClass: React.ComponentType<Partial<InternalSelectProps>> & {
+  //   Option?: React.ComponentType<Partial<OptionProps>>;
+  // };
+  // showSizeChanger: PaginationProps['showSizeChanger'];
+  showSizeChanger: boolean;
+  sizeChangerRender?: SizeChangerRender;
 }
 
-const defaultPageSizeOptions = ['10', '20', '50', '100'];
+const defaultPageSizeOptions = [10, 20, 50, 100];
 
 const Options: React.FC<OptionsProps> = (props) => {
   const {
@@ -40,11 +54,12 @@ const Options: React.FC<OptionsProps> = (props) => {
     goButton,
     quickGo,
     rootPrefixCls,
-    selectComponentClass: Select,
-    selectPrefixCls,
+    // selectComponentClass,
+    // selectPrefixCls,
     disabled,
     buildOptionText,
     showSizeChanger,
+    sizeChangerRender,
   } = props;
 
   const [goInputText, setGoInputText] = React.useState('');
@@ -58,14 +73,14 @@ const Options: React.FC<OptionsProps> = (props) => {
   const mergeBuildOptionText =
     typeof buildOptionText === 'function'
       ? buildOptionText
-      : (value: string) => `${value} ${locale.items_per_page}`;
+      : (value: string | number) => `${value} ${locale.items_per_page}`;
 
-  const changeSizeHandle = (value: number, option) => {
-    changeSize?.(Number(value));
-    if (typeof showSizeChanger === 'object') {
-      showSizeChanger.onChange?.(value, option);
-    }
-  };
+  // const changeSizeHandle = (value: number, option) => {
+  //   changeSize?.(Number(value));
+  //   if (typeof showSizeChanger === 'object') {
+  //     showSizeChanger.onChange?.(value, option);
+  //   }
+  // };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setGoInputText(e.target.value);
@@ -104,7 +119,7 @@ const Options: React.FC<OptionsProps> = (props) => {
     ) {
       return pageSizeOptions;
     }
-    return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
+    return pageSizeOptions.concat([pageSize]).sort((a, b) => {
       const numberA = Number.isNaN(Number(a)) ? 0 : Number(a);
       const numberB = Number.isNaN(Number(b)) ? 0 : Number(b);
       return numberA - numberB;
@@ -123,47 +138,65 @@ const Options: React.FC<OptionsProps> = (props) => {
   let goInput: React.ReactNode = null;
   let gotoButton: React.ReactNode = null;
 
-  if (showSizeChanger && Select) {
-    const {
-      options: showSizeChangerOptions,
-      className: showSizeChangerClassName,
-    } =
-      typeof showSizeChanger === 'object'
-        ? showSizeChanger
-        : ({} as SelectProps);
-    // use showSizeChanger.options if existed, otherwise use pageSizeOptions
-    const options = showSizeChangerOptions
-      ? undefined
-      : getPageSizeOptions().map((opt, i) => (
-          <Select.Option key={i} value={opt.toString()}>
-            {mergeBuildOptionText(opt)}
-          </Select.Option>
-        ));
-
-    changeSelect = (
-      <Select
-        disabled={disabled}
-        prefixCls={selectPrefixCls}
-        showSearch={false}
-        optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
-        popupMatchSelectWidth={false}
-        value={(pageSize || pageSizeOptions[0]).toString()}
-        getPopupContainer={(triggerNode) => triggerNode.parentNode}
-        aria-label={locale.page_size}
-        defaultOpen={false}
-        {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
-        className={classNames(
-          `${prefixCls}-size-changer`,
-          showSizeChangerClassName,
-        )}
-        options={showSizeChangerOptions}
-        onChange={changeSizeHandle}
-      >
-        {options}
-      </Select>
-    );
+  // >>>>> Size Changer
+  if (showSizeChanger && sizeChangerRender) {
+    changeSelect = sizeChangerRender({
+      disabled,
+      size: pageSize,
+      onSizeChange: (nextValue) => {
+        changeSize?.(Number(nextValue));
+      },
+      'aria-label': locale.page_size,
+      className: `${prefixCls}-size-changer`,
+      options: getPageSizeOptions().map((opt) => ({
+        label: mergeBuildOptionText(opt),
+        value: opt,
+      })),
+    });
   }
 
+  // if (showSizeChanger && Select) {
+  //   const {
+  //     options: showSizeChangerOptions,
+  //     className: showSizeChangerClassName,
+  //   } =
+  //     typeof showSizeChanger === 'object'
+  //       ? showSizeChanger
+  //       : ({} as SelectProps);
+  //   // use showSizeChanger.options if existed, otherwise use pageSizeOptions
+  //   const options = showSizeChangerOptions
+  //     ? undefined
+  //     : getPageSizeOptions().map((opt, i) => (
+  //         <Select.Option key={i} value={opt.toString()}>
+  //           {mergeBuildOptionText(opt)}
+  //         </Select.Option>
+  //       ));
+
+  //   changeSelect = (
+  //     <Select
+  //       disabled={disabled}
+  //       prefixCls={selectPrefixCls}
+  //       showSearch={false}
+  //       optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
+  //       popupMatchSelectWidth={false}
+  //       value={(pageSize || pageSizeOptions[0]).toString()}
+  //       getPopupContainer={(triggerNode) => triggerNode.parentNode}
+  //       aria-label={locale.page_size}
+  //       defaultOpen={false}
+  //       {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)}
+  //       className={classNames(
+  //         `${prefixCls}-size-changer`,
+  //         showSizeChangerClassName,
+  //       )}
+  //       options={showSizeChangerOptions}
+  //       onChange={changeSizeHandle}
+  //     >
+  //       {options}
+  //     </Select>
+  //   );
+  // }
+
+  // >>>>> Quick Go
   if (quickGo) {
     if (goButton) {
       gotoButton =
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index fd37018b..410d96c4 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -39,7 +39,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     prefixCls = 'rc-pagination',
     selectPrefixCls = 'rc-select',
     className,
-    selectComponentClass,
+    // selectComponentClass,
 
     // control
     current: currentProp,
@@ -64,6 +64,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     simple,
     showTotal,
     showSizeChanger = total > totalBoundaryShowSizeChanger,
+    sizeChangerRender,
     pageSizeOptions,
 
     // render
@@ -582,7 +583,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         locale={locale}
         rootPrefixCls={prefixCls}
         disabled={disabled}
-        selectComponentClass={selectComponentClass}
+        // selectComponentClass={selectComponentClass}
         selectPrefixCls={selectPrefixCls}
         changeSize={changePageSize}
         pageSize={pageSize}
@@ -590,6 +591,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         quickGo={shouldDisplayQuickJumper ? handleChange : null}
         goButton={gotoButton}
         showSizeChanger={showSizeChanger}
+        sizeChangerRender={sizeChangerRender}
       />
     </ul>
   );
diff --git a/src/interface.ts b/src/interface.ts
index 6a1d60d3..37ce71fa 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { SelectProps } from 'rc-select';
+import type { SizeChangerRender } from './Options';
 
 export interface PaginationLocale {
   // Options
@@ -22,7 +22,8 @@ export interface PaginationData {
   className: string;
   selectPrefixCls: string;
   prefixCls: string;
-  pageSizeOptions: string[] | number[];
+  // pageSizeOptions: string[] | number[];
+  pageSizeOptions: number[];
 
   current: number;
   defaultCurrent: number;
@@ -33,7 +34,8 @@ export interface PaginationData {
 
   hideOnSinglePage: boolean;
   align: 'start' | 'center' | 'end';
-  showSizeChanger: boolean | SelectProps;
+  showSizeChanger: boolean;
+  sizeChangerRender?: SizeChangerRender;
   showLessItems: boolean;
   showPrevNextJumpers: boolean;
   showQuickJumper: boolean | object;
@@ -45,7 +47,7 @@ export interface PaginationData {
 
   style: React.CSSProperties;
 
-  selectComponentClass: React.ComponentType;
+  // selectComponentClass: React.ComponentType;
   prevIcon: React.ComponentType | React.ReactNode;
   nextIcon: React.ComponentType | React.ReactNode;
   jumpPrevIcon: React.ComponentType | React.ReactNode;
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index cab49ac7..4ed03894 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -1649,31 +1649,35 @@ exports[`Example jumper 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
+            class="rc-select-selection-wrap"
           >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="20 条/页"
-          >
-            20 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="20 条/页"
+            >
+              20 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -1830,32 +1834,36 @@ exports[`Example jumper 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              disabled=""
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="20 条/页"
+            class="rc-select-selection-wrap"
           >
-            20 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                disabled=""
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="20 条/页"
+            >
+              20 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -1925,31 +1933,35 @@ exports[`Example jumper 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条/页"
+            class="rc-select-selection-wrap"
           >
-            10 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条/页"
+            >
+              10 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -2005,31 +2017,35 @@ exports[`Example jumper 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条/页"
+            class="rc-select-selection-wrap"
           >
-            10 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条/页"
+            >
+              10 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -2180,31 +2196,35 @@ exports[`Example jumperWithGoButton 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="20 条/页"
+            class="rc-select-selection-wrap"
           >
-            20 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="20 条/页"
+            >
+              20 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -2717,31 +2737,35 @@ exports[`Example locale 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
+            class="rc-select-selection-wrap"
           >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="Page Size"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="20 / page"
-          >
-            20 / page
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Page Size"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="20 / page"
+            >
+              20 / page
+            </span>
           </span>
         </div>
       </div>
@@ -3052,31 +3076,35 @@ exports[`Example showSizeChanger 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条/页"
+            class="rc-select-selection-wrap"
           >
-            10 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条/页"
+            >
+              10 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -3098,7 +3126,7 @@ exports[`Example showSizeChanger 1`] = `
       />
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active"
+      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
       tabindex="0"
       title="1"
     >
@@ -3109,58 +3137,14 @@ exports[`Example showSizeChanger 1`] = `
       </a>
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-2"
-      tabindex="0"
-      title="2"
-    >
-      <a
-        rel="nofollow"
-      >
-        2
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-3"
-      tabindex="0"
-      title="3"
-    >
-      <a
-        rel="nofollow"
-      >
-        3
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-4"
-      tabindex="0"
-      title="4"
-    >
-      <a
-        rel="nofollow"
-      >
-        4
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-5"
-      tabindex="0"
-      title="5"
-    >
-      <a
-        rel="nofollow"
-      >
-        5
-      </a>
-    </li>
-    <li
-      aria-disabled="false"
-      class="rc-pagination-next"
-      tabindex="0"
+      aria-disabled="true"
+      class="rc-pagination-next rc-pagination-disabled"
       title="下一页"
     >
       <button
         aria-label="next page"
         class="rc-pagination-item-link"
+        disabled=""
         type="button"
       />
     </li>
@@ -3169,34 +3153,41 @@ exports[`Example showSizeChanger 1`] = `
     >
       <div
         aria-label="页码"
-        class="rc-select rc-pagination-options-size-changer my-select rc-select-single rc-select-show-search"
+        class="rc-select rc-pagination-options-size-changer rc-select-single"
       >
         <div
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              role="combobox"
-              type="search"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条每页"
+            class="rc-select-selection-wrap"
           >
-            10 条每页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条每页"
+            >
+              10 条每页
+            </span>
           </span>
         </div>
       </div>
@@ -3892,31 +3883,35 @@ exports[`Example simple 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
+            class="rc-select-selection-wrap"
           >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条/页"
-          >
-            10 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条/页"
+            >
+              10 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -3981,31 +3976,35 @@ exports[`Example simple 1`] = `
           class="rc-select-selector"
         >
           <span
-            class="rc-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              readonly=""
-              role="combobox"
-              style="opacity: 0;"
-              type="search"
-              unselectable="on"
-              value=""
-            />
-          </span>
-          <span
-            class="rc-select-selection-item"
-            title="10 条/页"
+            class="rc-select-selection-wrap"
           >
-            10 条/页
+            <span
+              class="rc-select-selection-search"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="页码"
+                aria-owns="rc_select_TEST_OR_SSR_list"
+                autocomplete="off"
+                class="rc-select-selection-search-input"
+                id="rc_select_TEST_OR_SSR"
+                readonly=""
+                role="combobox"
+                style="opacity: 0;"
+                type="search"
+                unselectable="on"
+                value=""
+              />
+            </span>
+            <span
+              class="rc-select-selection-item"
+              title="10 条/页"
+            >
+              10 条/页
+            </span>
           </span>
         </div>
       </div>
@@ -4101,31 +4100,35 @@ exports[`Example sizer 1`] = `
             class="rc-select-selector"
           >
             <span
-              class="rc-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="页码"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="rc-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="rc-select-selection-item"
-              title="15 条/页"
+              class="rc-select-selection-wrap"
             >
-              15 条/页
+              <span
+                class="rc-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="页码"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="rc-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="rc-select-selection-item"
+                title="15 条/页"
+              >
+                15 条/页
+              </span>
             </span>
           </div>
         </div>
@@ -4285,31 +4288,35 @@ exports[`Example sizer 1`] = `
             class="rc-select-selector"
           >
             <span
-              class="rc-select-selection-search"
-            >
-              <input
-                aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="页码"
-                aria-owns="rc_select_TEST_OR_SSR_list"
-                autocomplete="off"
-                class="rc-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
-                readonly=""
-                role="combobox"
-                style="opacity: 0;"
-                type="search"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="rc-select-selection-item"
-              title="15 条/页"
+              class="rc-select-selection-wrap"
             >
-              15 条/页
+              <span
+                class="rc-select-selection-search"
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="rc_select_TEST_OR_SSR_list"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-label="页码"
+                  aria-owns="rc_select_TEST_OR_SSR_list"
+                  autocomplete="off"
+                  class="rc-select-selection-search-input"
+                  id="rc_select_TEST_OR_SSR"
+                  readonly=""
+                  role="combobox"
+                  style="opacity: 0;"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="rc-select-selection-item"
+                title="15 条/页"
+              >
+                15 条/页
+              </span>
             </span>
           </div>
         </div>
diff --git a/tests/__snapshots__/options.test.tsx.snap b/tests/__snapshots__/options.test.tsx.snap
index 5824f3f0..c241a318 100644
--- a/tests/__snapshots__/options.test.tsx.snap
+++ b/tests/__snapshots__/options.test.tsx.snap
@@ -12,31 +12,35 @@ exports[`Options should render correctly 1`] = `
       class="rc-select-selector"
     >
       <span
-        class="rc-select-selection-search"
+        class="rc-select-selection-wrap"
       >
-        <input
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="false"
-          aria-haspopup="listbox"
-          aria-label="页码"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          readonly=""
-          role="combobox"
-          style="opacity: 0;"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="rc-select-selection-item"
-        title="10 条/页"
-      >
-        10 条/页
+        <span
+          class="rc-select-selection-search"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="页码"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="rc-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="rc-select-selection-item"
+          title="10 条/页"
+        >
+          10 条/页
+        </span>
       </span>
     </div>
   </div>
diff --git a/tests/commonUtil.tsx b/tests/commonUtil.tsx
new file mode 100644
index 00000000..7ab44a23
--- /dev/null
+++ b/tests/commonUtil.tsx
@@ -0,0 +1,27 @@
+import Select from 'rc-select';
+import type { PaginationProps } from '../src/interface';
+import React from 'react';
+
+export const sizeChangerRender: PaginationProps['sizeChangerRender'] = ({
+  disabled,
+  size: pageSize,
+  onSizeChange,
+  'aria-label': ariaLabel,
+  className,
+  options,
+}) => {
+  return (
+    <Select
+      disabled={disabled}
+      showSearch={false}
+      dropdownMatchSelectWidth={false}
+      value={pageSize || options[0].value}
+      getPopupContainer={(triggerNode) => triggerNode.parentNode}
+      aria-label={ariaLabel}
+      defaultOpen={false}
+      className={className}
+      options={options}
+      onChange={onSizeChange}
+    />
+  );
+};
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index c56ffb36..7f5c8e12 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -4,6 +4,7 @@ import Select from 'rc-select';
 import React from 'react';
 import Pagination from '../src';
 import { resetWarned } from 'rc-util/lib/warning';
+import { sizeChangerRender } from './commonUtil';
 
 describe('Default Pagination', () => {
   let wrapper: RenderResult;
@@ -339,7 +340,8 @@ describe('Other props', () => {
   it('disabled', () => {
     const { container, getByRole } = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         showQuickJumper={{ goButton: true }}
         showSizeChanger
         defaultPageSize={20}
@@ -367,7 +369,8 @@ describe('current value on onShowSizeChange when total is 0', () => {
   beforeEach(() => {
     wrapper = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         showSizeChanger
         onShowSizeChange={onShowSizeChange}
         onChange={onChange}
@@ -425,20 +428,29 @@ describe('current value on onShowSizeChange when total is 0', () => {
 
   it('size changer show logic', () => {
     const wrapper1 = render(
-      <Pagination selectComponentClass={Select} total={50} />,
+      <Pagination
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
+        total={50}
+      />,
     );
     expect(
       wrapper1.container.querySelector('.rc-pagination-options-size-changer'),
     ).toBeFalsy();
     const wrapper2 = render(
-      <Pagination selectComponentClass={Select} total={51} />,
+      <Pagination
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
+        total={51}
+      />,
     );
     expect(
       wrapper2.container.querySelector('.rc-pagination-options-size-changer'),
     ).toBeTruthy();
     const wrapper3 = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         showSizeChanger={false}
         total={51}
       />,
@@ -447,7 +459,12 @@ describe('current value on onShowSizeChange when total is 0', () => {
       wrapper3.container.querySelector('.rc-pagination-options-size-changer'),
     ).toBeFalsy();
     const wrapper4 = render(
-      <Pagination selectComponentClass={Select} showSizeChanger total={50} />,
+      <Pagination
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
+        showSizeChanger
+        total={50}
+      />,
     );
     expect(
       wrapper4.container.querySelector('.rc-pagination-options-size-changer'),
@@ -457,7 +474,8 @@ describe('current value on onShowSizeChange when total is 0', () => {
   it('totalBoundaryShowSizeChanger works', () => {
     const wrapper1 = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         total={100}
         totalBoundaryShowSizeChanger={100}
       />,
@@ -467,7 +485,8 @@ describe('current value on onShowSizeChange when total is 0', () => {
     ).toBeFalsy();
     const wrapper2 = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         total={101}
         totalBoundaryShowSizeChanger={100}
       />,
@@ -477,7 +496,8 @@ describe('current value on onShowSizeChange when total is 0', () => {
     ).toBeTruthy();
     const wrapper3 = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         showSizeChanger={false}
         total={101}
         totalBoundaryShowSizeChanger={100}
@@ -488,7 +508,8 @@ describe('current value on onShowSizeChange when total is 0', () => {
     ).toBeFalsy();
     const wrapper4 = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         showSizeChanger
         total={100}
         totalBoundaryShowSizeChanger={100}
diff --git a/tests/options.test.tsx b/tests/options.test.tsx
index 747644bc..97abb9d4 100644
--- a/tests/options.test.tsx
+++ b/tests/options.test.tsx
@@ -1,14 +1,16 @@
 import { render } from '@testing-library/react';
-import Select from 'rc-select';
+// import Select from 'rc-select';
 import zhCN from '../src/locale/zh_CN';
 import Options from '../src/Options';
 import * as React from 'react';
+import { sizeChangerRender } from './commonUtil';
 
 const WrapperOptions: React.FC<any> = (props) => (
   <Options
     locale={zhCN}
     rootPrefixCls="rc-pagination"
-    selectComponentClass={Select}
+    // selectComponentClass={Select}
+    sizeChangerRender={sizeChangerRender}
     pageSize={10}
     changeSize={jest.fn()}
     quickGo={jest.fn()}
diff --git a/tests/simple.test.tsx b/tests/simple.test.tsx
index 7bef3f8b..36b493df 100644
--- a/tests/simple.test.tsx
+++ b/tests/simple.test.tsx
@@ -3,6 +3,7 @@ import { render, fireEvent, createEvent } from '@testing-library/react';
 import Select from 'rc-select';
 import React, { useState } from 'react';
 import Pagination from '../src';
+import { sizeChangerRender } from './commonUtil';
 
 describe('simple Pagination', () => {
   let wrapper: RenderResult;
@@ -105,7 +106,8 @@ describe('simple Pagination', () => {
         total={500}
         pageSize={15}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
       />,
     );
     fireEvent.mouseDown(getByRole('combobox'));
@@ -117,7 +119,8 @@ describe('simple Pagination', () => {
     const { container, getByRole } = render(
       <Pagination
         simple
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         onChange={onChange}
         total={500}
         defaultPageSize={20}
@@ -230,7 +233,7 @@ describe('simple Pagination', () => {
 
       return (
         <div>
-          <button onClick={() => setCurrent((i) => ++i)}>increase</button>
+          <button onClick={() => setCurrent((i) => i + 1)}>increase</button>
           <Pagination
             simple
             current={current}
diff --git a/tests/sizer.test.tsx b/tests/sizer.test.tsx
index 9643c507..fd70b71a 100644
--- a/tests/sizer.test.tsx
+++ b/tests/sizer.test.tsx
@@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Select from 'rc-select';
 import Pagination from '../src';
+import { sizeChangerRender } from './commonUtil';
 
 describe('Pagination with sizer', () => {
   it('should merge custom pageSize to pageSizeOptions', () => {
@@ -11,7 +12,8 @@ describe('Pagination with sizer', () => {
         total={500}
         pageSize={15}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
       />,
     );
     const select = getByRole('combobox');
@@ -26,7 +28,8 @@ describe('Pagination with sizer', () => {
         total={500}
         pageSize={20}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
       />,
     );
     fireEvent.mouseDown(getByRole('combobox'));
@@ -39,7 +42,8 @@ describe('Pagination with sizer', () => {
         total={500}
         pageSize={45}
         showSizeChanger
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
       />,
     );
     fireEvent.mouseDown(getByRole('combobox'));
@@ -53,7 +57,8 @@ describe('Pagination with sizer', () => {
     const onChange = jest.fn();
     const { container, getByRole } = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         onChange={onChange}
         total={500}
         defaultPageSize={20}
@@ -73,7 +78,8 @@ describe('Pagination with sizer', () => {
   it('should contains locale text in selected pageSize when pageSizeOptions are numbers', () => {
     const { container } = render(
       <Pagination
-        selectComponentClass={Select}
+        // selectComponentClass={Select}
+        sizeChangerRender={sizeChangerRender}
         total={500}
         defaultPageSize={20}
         pageSizeOptions={[20, 50]}
@@ -84,91 +90,91 @@ describe('Pagination with sizer', () => {
     ).toHaveTextContent('20 条/页');
   });
 
-  describe('showSizeChanger is object', () => {
-    const options = [
-      { value: '10', label: '10 条每页' },
-      { value: '25', label: '25 条每页' },
-      { value: '50', label: '50 条每页' },
-      { value: '75', label: '75 条每页' },
-      { value: '100', label: '100 条每页' },
-    ];
+  // describe('showSizeChanger is object', () => {
+  // const options = [
+  //   { value: '10', label: '10 条每页' },
+  //   { value: '25', label: '25 条每页' },
+  //   { value: '50', label: '50 条每页' },
+  //   { value: '75', label: '75 条每页' },
+  //   { value: '100', label: '100 条每页' },
+  // ];
 
-    it('showSizeChanger.className should be added to select node', async () => {
-      const { container } = render(
-        <Pagination
-          defaultCurrent={1}
-          total={500}
-          selectComponentClass={Select}
-          showSizeChanger={{
-            className: 'custom-class-name',
-          }}
-        />,
-      );
-      const select = container.querySelector('.rc-select');
-      expect(select.className).toContain('custom-class-name');
-      expect(select.className).toContain('rc-pagination-options-size-changer');
-    });
+  // it('showSizeChanger.className should be added to select node', async () => {
+  //   const { container } = render(
+  //     <Pagination
+  //       defaultCurrent={1}
+  //       total={500}
+  //       selectComponentClass={Select}
+  //       showSizeChanger={{
+  //         className: 'custom-class-name',
+  //       }}
+  //     />,
+  //   );
+  //   const select = container.querySelector('.rc-select');
+  //   expect(select.className).toContain('custom-class-name');
+  //   expect(select.className).toContain('rc-pagination-options-size-changer');
+  // });
 
-    it('should onChange called when pageSize change', () => {
-      const onChange = jest.fn();
-      const { container, getByRole } = render(
-        <Pagination
-          defaultCurrent={1}
-          total={500}
-          selectComponentClass={Select}
-          showSizeChanger={{
-            options,
-            onChange,
-          }}
-        />,
-      );
-      const select = getByRole('combobox');
-      expect(select).toBeTruthy();
-      fireEvent.mouseDown(select);
-      expect(
-        container.querySelectorAll('.rc-select-item')[2],
-      ).toHaveTextContent('50 条每页');
-      const pageSize1 = container.querySelectorAll('.rc-select-item')[1];
-      fireEvent.click(pageSize1);
-      expect(onChange).toHaveBeenCalledWith('25', {
-        label: '25 条每页',
-        value: '25',
-      });
-    });
+  // it('should onChange called when pageSize change', () => {
+  //   const onChange = jest.fn();
+  //   const { container, getByRole } = render(
+  //     <Pagination
+  //       defaultCurrent={1}
+  //       total={500}
+  //       selectComponentClass={Select}
+  //       showSizeChanger={{
+  //         options,
+  //         onChange,
+  //       }}
+  //     />,
+  //   );
+  //   const select = getByRole('combobox');
+  //   expect(select).toBeTruthy();
+  //   fireEvent.mouseDown(select);
+  //   expect(
+  //     container.querySelectorAll('.rc-select-item')[2],
+  //   ).toHaveTextContent('50 条每页');
+  //   const pageSize1 = container.querySelectorAll('.rc-select-item')[1];
+  //   fireEvent.click(pageSize1);
+  //   expect(onChange).toHaveBeenCalledWith('25', {
+  //     label: '25 条每页',
+  //     value: '25',
+  //   });
+  // });
 
-    it('should onChange called when pageSize change with search', async () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <Pagination
-          defaultCurrent={1}
-          total={500}
-          selectComponentClass={Select}
-          showSizeChanger={{
-            options,
-            showSearch: true,
-            onChange,
-          }}
-        />,
-      );
-      expect(container.querySelector('input').hasAttribute('readOnly')).toBe(
-        false,
-      );
-      await userEvent.type(container.querySelector('input'), '25');
-      expect(
-        container.querySelectorAll('.rc-select-item-option-content'),
-      ).toHaveLength(1);
-      expect(
-        container.querySelector('.rc-select-item-option-content').textContent,
-      ).toBe('25 条每页');
-      const pageSize1 = container.querySelector(
-        '.rc-select-item-option-content',
-      );
-      expect(pageSize1).toBeInTheDocument();
-      fireEvent.click(pageSize1);
-      expect(onChange).toHaveBeenCalledWith('25', {
-        label: '25 条每页',
-        value: '25',
-      });
-    });
-  });
+  // it('should onChange called when pageSize change with search', async () => {
+  //   const onChange = jest.fn();
+  //   const { container } = render(
+  //     <Pagination
+  //       defaultCurrent={1}
+  //       total={500}
+  //       selectComponentClass={Select}
+  //       showSizeChanger={{
+  //         options,
+  //         showSearch: true,
+  //         onChange,
+  //       }}
+  //     />,
+  //   );
+  //   expect(container.querySelector('input').hasAttribute('readOnly')).toBe(
+  //     false,
+  //   );
+  //   await userEvent.type(container.querySelector('input'), '25');
+  //   expect(
+  //     container.querySelectorAll('.rc-select-item-option-content'),
+  //   ).toHaveLength(1);
+  //   expect(
+  //     container.querySelector('.rc-select-item-option-content').textContent,
+  //   ).toBe('25 条每页');
+  //   const pageSize1 = container.querySelector(
+  //     '.rc-select-item-option-content',
+  //   );
+  //   expect(pageSize1).toBeInTheDocument();
+  //   fireEvent.click(pageSize1);
+  //   expect(onChange).toHaveBeenCalledWith('25', {
+  //     label: '25 条每页',
+  //     value: '25',
+  //   });
+  // });
+  // });
 });
diff --git a/tests/two-pagination.tsx b/tests/two-pagination.tsx
index 4e2e4f11..f439f6f2 100644
--- a/tests/two-pagination.tsx
+++ b/tests/two-pagination.tsx
@@ -1,7 +1,7 @@
 // import 'rc-select/assets/index.less';
-import Select from 'rc-select';
 import React from 'react';
 import Pagination from '../src';
+import { sizeChangerRender } from './commonUtil';
 
 class Hello extends React.Component {
   state = {
@@ -22,7 +22,8 @@ class Hello extends React.Component {
         </button>
         <Pagination
           className="p1"
-          selectComponentClass={Select}
+          // selectComponentClass={Select}
+          sizeChangerRender={sizeChangerRender}
           showSizeChanger
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}
@@ -31,7 +32,8 @@ class Hello extends React.Component {
         />
         <Pagination
           className="p2"
-          selectComponentClass={Select}
+          // selectComponentClass={Select}
+          sizeChangerRender={sizeChangerRender}
           showSizeChanger
           pageSize={this.state.pageSize}
           onShowSizeChange={this.onShowSizeChange}