diff --git a/examples/debug.tsx b/examples/debug.tsx
new file mode 100644
index 0000000..9a447e5
--- /dev/null
+++ b/examples/debug.tsx
@@ -0,0 +1,15 @@
+/* eslint no-console: 0 */
+
+import React from 'react';
+import Mentions from '../src';
+import '../assets/index.less';
+
+const { Option } = Mentions;
+
+export default () => (
+  <Mentions rows={3} defaultValue="Hello World" open>
+    <Option value="light">Light</Option>
+    <Option value="bamboo">Bamboo</Option>
+    <Option value="cat">Cat</Option>
+  </Mentions>
+);
diff --git a/package.json b/package.json
index be60fc7..71b187c 100644
--- a/package.json
+++ b/package.json
@@ -39,22 +39,21 @@
     "react-dom": ">=16.9.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "@types/classnames": "^2.2.6",
-    "@types/enzyme": "^3.1.15",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/warning": "^3.0.0",
     "@umijs/fabric": "^2.0.8",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.1.4",
     "eslint": "^7.0.0",
     "father": "^2.13.6",
     "jest": "^28.0.3",
     "lodash.debounce": "^4.0.8",
     "np": "^7.0.0",
     "prettier": "^2.0.5",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "typescript": "^4.0.3"
   },
   "dependencies": {
@@ -63,6 +62,6 @@
     "rc-menu": "~9.6.0",
     "rc-textarea": "^0.3.0",
     "rc-trigger": "^5.0.4",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.22.5"
   }
 }
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 29a6c15..f385ecc 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -1,7 +1,7 @@
 import Menu, { MenuItem } from 'rc-menu';
 import * as React from 'react';
-import { MentionsContextConsumer, MentionsContextProps } from './MentionsContext';
-import { OptionProps } from './Option';
+import MentionsContext from './MentionsContext';
+import type { OptionProps } from './Option';
 
 interface DropdownMenuProps {
   prefixCls?: string;
@@ -12,54 +12,50 @@ interface DropdownMenuProps {
  * We only use Menu to display the candidate.
  * The focus is controlled by textarea to make accessibility easy.
  */
-class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
-  public renderDropdown = ({
+function DropdownMenu(props: DropdownMenuProps) {
+  const {
     notFoundContent,
     activeIndex,
     setActiveIndex,
     selectOption,
     onFocus,
     onBlur,
-  }: MentionsContextProps) => {
-    const { prefixCls, options } = this.props;
-    const activeOption = options[activeIndex] || {};
+  } = React.useContext(MentionsContext);
 
-    return (
-      <Menu
-        prefixCls={`${prefixCls}-menu`}
-        activeKey={activeOption.key}
-        onSelect={({ key }) => {
-          const option = options.find(({ key: optionKey }) => optionKey === key);
-          selectOption(option);
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-      >
-        {options.map((option, index) => {
-          const { key, disabled, children, className, style } = option;
-          return (
-            <MenuItem
-              key={key}
-              disabled={disabled}
-              className={className}
-              style={style}
-              onMouseEnter={() => {
-                setActiveIndex(index);
-              }}
-            >
-              {children}
-            </MenuItem>
-          );
-        })}
+  const { prefixCls, options } = props;
+  const activeOption = options[activeIndex] || {};
 
-        {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
-      </Menu>
-    );
-  };
+  return (
+    <Menu
+      prefixCls={`${prefixCls}-menu`}
+      activeKey={activeOption.key}
+      onSelect={({ key }) => {
+        const option = options.find(({ key: optionKey }) => optionKey === key);
+        selectOption(option);
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    >
+      {options.map((option, index) => {
+        const { key, disabled, children, className, style } = option;
+        return (
+          <MenuItem
+            key={key}
+            disabled={disabled}
+            className={className}
+            style={style}
+            onMouseEnter={() => {
+              setActiveIndex(index);
+            }}
+          >
+            {children}
+          </MenuItem>
+        );
+      })}
 
-  public render() {
-    return <MentionsContextConsumer>{this.renderDropdown}</MentionsContextConsumer>;
-  }
+      {!options.length && <MenuItem disabled>{notFoundContent}</MenuItem>}
+    </Menu>
+  );
 }
 
 export default DropdownMenu;
diff --git a/src/Mentions.tsx b/src/Mentions.tsx
index 1769e66..98565ee 100644
--- a/src/Mentions.tsx
+++ b/src/Mentions.tsx
@@ -1,23 +1,29 @@
 import classNames from 'classnames';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import toArray from 'rc-util/lib/Children/toArray';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
-import TextArea, { TextAreaProps } from 'rc-textarea';
+import { useState, useRef } from 'react';
+import TextArea from 'rc-textarea';
+import type { TextAreaProps } from 'rc-textarea';
 import KeywordTrigger from './KeywordTrigger';
-import { MentionsContextProvider } from './MentionsContext';
-import Option, { OptionProps } from './Option';
+import MentionsContext from './MentionsContext';
+import Option from './Option';
+import type { OptionProps } from './Option';
 import {
   filterOption as defaultFilterOption,
   getBeforeSelectionText,
   getLastMeasureIndex,
-  omit,
-  Omit,
   replaceWithMeasure,
   setInputSelection,
   validateSearch as defaultValidateSearch,
 } from './util';
+import useEffectState from './hooks/useEffectState';
 
-type BaseTextareaAttrs = Omit<TextAreaProps, 'prefix' | 'onChange' | 'onSelect'>;
+type BaseTextareaAttrs = Omit<
+  TextAreaProps,
+  'prefix' | 'onChange' | 'onSelect'
+>;
 
 export type Placement = 'top' | 'bottom';
 export type Direction = 'ltr' | 'rtl';
@@ -44,91 +50,174 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
   dropdownClassName?: string;
+  /** @private Testing usage. Do not use in prod. It will not work as your expect. */
+  open?: boolean;
+  children?: React.ReactNode;
 }
-interface MentionsState {
-  value: string;
-  measuring: boolean;
-  measureText: string | null;
-  measurePrefix: string;
-  measureLocation: number;
-  activeIndex: number;
-  isFocus: boolean;
-}
-class Mentions extends React.Component<MentionsProps, MentionsState> {
-  public static Option = Option;
-
-  public textarea?: HTMLTextAreaElement;
 
-  public measure?: HTMLDivElement;
-
-  public focusId: number | undefined = undefined;
+export interface MentionsRef {
+  focus: VoidFunction;
+  blur: VoidFunction;
+}
 
-  public static defaultProps = {
-    prefixCls: 'rc-mentions',
-    prefix: '@',
-    split: ' ',
-    validateSearch: defaultValidateSearch,
-    filterOption: defaultFilterOption,
-    notFoundContent: 'Not Found',
-    rows: 1,
+const Mentions = React.forwardRef<MentionsRef, MentionsProps>((props, ref) => {
+  const {
+    // Style
+    prefixCls,
+    className,
+    style,
+
+    // Misc
+    prefix,
+    split,
+    notFoundContent,
+    value,
+    defaultValue,
+    children,
+
+    // Events
+    validateSearch,
+    filterOption,
+    onChange,
+    onKeyDown,
+    onKeyUp,
+    onPressEnter,
+    onSearch,
+    onSelect,
+
+    onFocus,
+    onBlur,
+
+    // Dropdown
+    transitionName,
+    placement,
+    direction,
+    getPopupContainer,
+    dropdownClassName,
+
+    // Rest
+    ...restProps
+  } = props;
+
+  // =============================== Refs ===============================
+  const textareaRef = useRef<TextArea>(null);
+  const measureRef = useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    focus: () => textareaRef.current?.focus(),
+    blur: () => textareaRef.current?.blur(),
+  }));
+
+  // ============================== State ===============================
+  const [measuring, setMeasuring] = useState(false);
+  const [measureText, setMeasureText] = useState('');
+  const [measurePrefix, setMeasurePrefix] = useState('');
+  const [measureLocation, setMeasureLocation] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isFocus, setIsFocus] = useState(false);
+
+  // ============================== Value ===============================
+  const [mergedValue, setMergedValue] = useMergedState('', {
+    defaultValue,
+    value: value,
+  });
+
+  // ============================== Option ==============================
+  const getOptions = React.useCallback(
+    (targetMeasureText: string) => {
+      const list = toArray(children)
+        .map(
+          ({
+            props: optionProps,
+            key,
+          }: {
+            props: OptionProps;
+            key: React.Key;
+          }) => ({
+            ...optionProps,
+            key: (key || optionProps.value) as string,
+          }),
+        )
+        .filter((option: OptionProps) => {
+          /** Return all result if `filterOption` is false. */
+          if (filterOption === false) {
+            return true;
+          }
+          return filterOption(targetMeasureText, option);
+        });
+      return list;
+    },
+    [children, filterOption],
+  );
+
+  const options = React.useMemo(
+    () => getOptions(measureText),
+    [getOptions, measureText],
+  );
+
+  // ============================= Measure ==============================
+  // Mark that we will reset input selection to target position when user select option
+  const onSelectionEffect = useEffectState();
+
+  const startMeasure = (
+    nextMeasureText: string,
+    nextMeasurePrefix: string,
+    nextMeasureLocation: number,
+  ) => {
+    setMeasuring(true);
+    setMeasureText(nextMeasureText);
+    setMeasurePrefix(nextMeasurePrefix);
+    setMeasureLocation(nextMeasureLocation);
+    setActiveIndex(0);
   };
 
-  public static getDerivedStateFromProps(props: MentionsProps, prevState: MentionsState) {
-    const newState: Partial<MentionsState> = {};
+  const stopMeasure = (callback?: VoidFunction) => {
+    setMeasuring(false);
+    setMeasureLocation(0);
+    setMeasureText('');
+    onSelectionEffect(callback);
+  };
 
-    if ('value' in props && props.value !== prevState.value) {
-      newState.value = props.value || '';
-    }
+  // ============================== Change ==============================
+  const triggerChange = (nextValue: string) => {
+    setMergedValue(nextValue);
+    onChange?.(nextValue);
+  };
 
-    return newState;
-  }
-
-  constructor(props: MentionsProps) {
-    super(props);
-    this.state = {
-      value: props.defaultValue || props.value || '',
-      measuring: false,
-      measureLocation: 0,
-      measureText: null,
-      measurePrefix: '',
-      activeIndex: 0,
-      isFocus: false,
-    };
-  }
-
-  public componentDidUpdate() {
-    const { measuring } = this.state;
-
-    // Sync measure div top with textarea for rc-trigger usage
-    if (measuring) {
-      this.measure.scrollTop = this.textarea.scrollTop;
-    }
-  }
+  const onInternalChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({
+    target: { value: nextValue },
+  }) => {
+    triggerChange(nextValue);
+  };
 
-  public triggerChange = (value: string) => {
-    const { onChange } = this.props;
-    if (!('value' in this.props)) {
-      this.setState({ value });
-    }
+  const selectOption = (option: OptionProps) => {
+    const getTextArea = () => textareaRef.current?.resizableTextArea?.textArea;
 
-    if (onChange) {
-      onChange(value);
-    }
-  };
+    const { value: mentionValue = '' } = option;
+    const { text, selectionLocation } = replaceWithMeasure(mergedValue, {
+      measureLocation,
+      targetText: mentionValue,
+      prefix: measurePrefix,
+      selectionStart: getTextArea()?.selectionStart,
+      split,
+    });
+    triggerChange(text);
+    stopMeasure(() => {
+      // We need restore the selection position
+      setInputSelection(getTextArea(), selectionLocation);
+    });
 
-  public onChange: React.ChangeEventHandler<HTMLTextAreaElement> = ({ target: { value } }) => {
-    this.triggerChange(value);
+    onSelect?.(option, measurePrefix);
   };
 
+  // ============================= KeyEvent =============================
   // Check if hit the measure keyword
-  public onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
+  const onInternalKeyDown: React.KeyboardEventHandler<
+    HTMLTextAreaElement
+  > = event => {
     const { which } = event;
-    const { activeIndex, measuring } = this.state;
-    const { onKeyDown: clientOnKeyDown } = this.props;
 
-    if (clientOnKeyDown) {
-      clientOnKeyDown(event);
-    }
+    onKeyDown?.(event);
 
     // Skip if not measuring
     if (!measuring) {
@@ -137,25 +226,22 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
 
     if (which === KeyCode.UP || which === KeyCode.DOWN) {
       // Control arrow function
-      const optionLen = this.getOptions().length;
+      const optionLen = options.length;
       const offset = which === KeyCode.UP ? -1 : 1;
       const newActiveIndex = (activeIndex + offset + optionLen) % optionLen;
-      this.setState({
-        activeIndex: newActiveIndex,
-      });
+      setActiveIndex(newActiveIndex);
       event.preventDefault();
     } else if (which === KeyCode.ESC) {
-      this.stopMeasure();
+      stopMeasure();
     } else if (which === KeyCode.ENTER) {
       // Measure hit
       event.preventDefault();
-      const options = this.getOptions();
       if (!options.length) {
-        this.stopMeasure();
+        stopMeasure();
         return;
       }
       const option = options[activeIndex];
-      this.selectOption(option);
+      selectOption(option);
     }
   };
 
@@ -171,44 +257,45 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
    * 2. Contains `space`
    * 3. ESC or select one
    */
-  public onKeyUp: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
+  const onInternalKeyUp: React.KeyboardEventHandler<
+    HTMLTextAreaElement
+  > = event => {
     const { key, which } = event;
-    const { measureText: prevMeasureText, measuring } = this.state;
-    const { prefix = '', onKeyUp: clientOnKeyUp, onSearch, validateSearch } = this.props;
     const target = event.target as HTMLTextAreaElement;
     const selectionStartText = getBeforeSelectionText(target);
-    const { location: measureIndex, prefix: measurePrefix } = getLastMeasureIndex(
-      selectionStartText,
-      prefix,
-    );
+    const { location: measureIndex, prefix: nextMeasurePrefix } =
+      getLastMeasureIndex(selectionStartText, prefix);
 
     // If the client implements an onKeyUp handler, call it
-    if (clientOnKeyUp) {
-      clientOnKeyUp(event);
-    }
+    onKeyUp?.(event);
 
     // Skip if match the white key list
-    if ([KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !== -1) {
+    if (
+      [KeyCode.ESC, KeyCode.UP, KeyCode.DOWN, KeyCode.ENTER].indexOf(which) !==
+      -1
+    ) {
       return;
     }
 
     if (measureIndex !== -1) {
-      const measureText = selectionStartText.slice(measureIndex + measurePrefix.length);
-      const validateMeasure: boolean = validateSearch(measureText, this.props);
-      const matchOption = !!this.getOptions(measureText).length;
+      const nextMeasureText = selectionStartText.slice(
+        measureIndex + nextMeasurePrefix.length,
+      );
+      const validateMeasure: boolean = validateSearch(nextMeasureText, props);
+      const matchOption = !!getOptions(nextMeasureText).length;
 
       if (validateMeasure) {
         if (
-          key === measurePrefix ||
+          key === nextMeasurePrefix ||
           key === 'Shift' ||
           measuring ||
-          (measureText !== prevMeasureText && matchOption)
+          (nextMeasureText !== measureText && matchOption)
         ) {
-          this.startMeasure(measureText, measurePrefix, measureIndex);
+          startMeasure(nextMeasureText, nextMeasurePrefix, measureIndex);
         }
       } else if (measuring) {
         // Stop if measureText is invalidate
-        this.stopMeasure();
+        stopMeasure();
       }
 
       /**
@@ -216,219 +303,109 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
        * If met `space` means user finished searching.
        */
       if (onSearch && validateMeasure) {
-        onSearch(measureText, measurePrefix);
+        onSearch(nextMeasureText, nextMeasurePrefix);
       }
     } else if (measuring) {
-      this.stopMeasure();
+      stopMeasure();
     }
   };
 
-  public onPressEnter: React.KeyboardEventHandler<HTMLTextAreaElement> = (event) => {
-    const { measuring } = this.state;
-    const { onPressEnter } = this.props;
+  const onInternalPressEnter: React.KeyboardEventHandler<
+    HTMLTextAreaElement
+  > = event => {
     if (!measuring && onPressEnter) {
       onPressEnter(event);
     }
   };
 
-  public onInputFocus: React.FocusEventHandler<HTMLTextAreaElement> = (event) => {
-    this.onFocus(event);
-  };
-
-  public onInputBlur: React.FocusEventHandler<HTMLTextAreaElement> = (event) => {
-    this.onBlur(event);
-  };
-
-  public onDropdownFocus = () => {
-    this.onFocus();
-  };
-
-  public onDropdownBlur = () => {
-    this.onBlur();
-  };
+  // ============================ Focus Blur ============================
+  const focusRef = useRef<number>();
 
-  public onFocus = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
-    window.clearTimeout(this.focusId);
-    const { isFocus } = this.state;
-    const { onFocus } = this.props;
+  const onInternalFocus = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
+    window.clearTimeout(focusRef.current);
     if (!isFocus && event && onFocus) {
       onFocus(event);
     }
-    this.setState({ isFocus: true });
+    setIsFocus(true);
   };
 
-  public onBlur = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
-    this.focusId = window.setTimeout(() => {
-      const { onBlur } = this.props;
-      this.setState({ isFocus: false });
-      this.stopMeasure();
-      if (onBlur) {
-        onBlur(event);
-      }
+  const onInternalBlur = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
+    focusRef.current = window.setTimeout(() => {
+      setIsFocus(false);
+      stopMeasure();
+      onBlur?.(event);
     }, 0);
   };
 
-  public selectOption = (option: OptionProps) => {
-    const { value, measureLocation, measurePrefix } = this.state;
-    const { split, onSelect } = this.props;
-
-    const { value: mentionValue = '' } = option;
-    const { text, selectionLocation } = replaceWithMeasure(value, {
-      measureLocation,
-      targetText: mentionValue,
-      prefix: measurePrefix,
-      selectionStart: this.textarea.selectionStart,
-      split,
-    });
-    this.triggerChange(text);
-    this.stopMeasure(() => {
-      // We need restore the selection position
-      setInputSelection(this.textarea, selectionLocation);
-    });
-
-    if (onSelect) {
-      onSelect(option, measurePrefix);
-    }
-  };
-
-  public setActiveIndex = (activeIndex: number) => {
-    this.setState({
-      activeIndex,
-    });
-  };
-
-  public setTextAreaRef = (element: TextArea) => {
-    this.textarea = element?.resizableTextArea?.textArea;
+  const onDropdownFocus = () => {
+    onInternalFocus();
   };
 
-  public setMeasureRef = (element: HTMLDivElement) => {
-    this.measure = element;
+  const onDropdownBlur = () => {
+    onInternalBlur();
   };
 
-  public getOptions = (measureText?: string): OptionProps[] => {
-    const targetMeasureText = measureText || this.state.measureText || '';
-    const { children, filterOption } = this.props;
-    const list = toArray(children)
-      .map(({ props, key }: { props: OptionProps; key: React.Key }) => ({
-        ...props,
-        key: (key || props.value) as string,
-      }))
-      .filter((option: OptionProps) => {
-        /** Return all result if `filterOption` is false. */
-        if (filterOption === false) {
-          return true;
-        }
-        return filterOption(targetMeasureText, option);
-      });
-    return list;
-  };
-
-  public startMeasure(measureText: string, measurePrefix: string, measureLocation: number) {
-    this.setState({
-      measuring: true,
-      measureText,
-      measurePrefix,
-      measureLocation,
-      activeIndex: 0,
-    });
-  }
-
-  public stopMeasure(callback?: () => void) {
-    this.setState(
-      {
-        measuring: false,
-        measureLocation: 0,
-        measureText: null,
-      },
-      callback,
-    );
-  }
-
-  public focus() {
-    this.textarea.focus();
-  }
-
-  public blur() {
-    this.textarea.blur();
-  }
-
-  public render() {
-    const { value, measureLocation, measurePrefix, measuring, activeIndex } = this.state;
-    const {
-      prefixCls,
-      placement,
-      direction,
-      transitionName,
-      className,
-      style,
-      autoFocus,
-      notFoundContent,
-      getPopupContainer,
-      dropdownClassName,
-      ...restProps
-    } = this.props;
-
-    const inputProps = omit(
-      restProps,
-      'value',
-      'defaultValue',
-      'prefix',
-      'split',
-      'children',
-      'validateSearch',
-      'filterOption',
-      'onSelect',
-      'onSearch',
-    );
-
-    const options = measuring ? this.getOptions() : [];
-
-    return (
-      <div className={classNames(prefixCls, className)} style={style}>
-        <TextArea
-          autoFocus={autoFocus}
-          ref={this.setTextAreaRef}
-          value={value}
-          {...inputProps}
-          onChange={this.onChange}
-          onKeyDown={this.onKeyDown}
-          onKeyUp={this.onKeyUp}
-          onPressEnter={this.onPressEnter}
-          onFocus={this.onInputFocus}
-          onBlur={this.onInputBlur}
-        />
-        {measuring && (
-          <div ref={this.setMeasureRef} className={`${prefixCls}-measure`}>
-            {value.slice(0, measureLocation)}
-            <MentionsContextProvider
-              value={{
-                notFoundContent,
-                activeIndex,
-                setActiveIndex: this.setActiveIndex,
-                selectOption: this.selectOption,
-                onFocus: this.onDropdownFocus,
-                onBlur: this.onDropdownBlur,
-              }}
+  // ============================== Render ==============================
+  return (
+    <div className={classNames(prefixCls, className)} style={style}>
+      <TextArea
+        ref={textareaRef}
+        value={mergedValue}
+        {...restProps}
+        onChange={onInternalChange}
+        onKeyDown={onInternalKeyDown}
+        onKeyUp={onInternalKeyUp}
+        onPressEnter={onInternalPressEnter}
+        onFocus={onInternalFocus}
+        onBlur={onInternalBlur}
+      />
+      {measuring && (
+        <div ref={measureRef} className={`${prefixCls}-measure`}>
+          {mergedValue.slice(0, measureLocation)}
+          <MentionsContext.Provider
+            value={{
+              notFoundContent,
+              activeIndex,
+              setActiveIndex,
+              selectOption,
+              onFocus: onDropdownFocus,
+              onBlur: onDropdownBlur,
+            }}
+          >
+            <KeywordTrigger
+              prefixCls={prefixCls}
+              transitionName={transitionName}
+              placement={placement}
+              direction={direction}
+              options={options}
+              visible
+              getPopupContainer={getPopupContainer}
+              dropdownClassName={dropdownClassName}
             >
-              <KeywordTrigger
-                prefixCls={prefixCls}
-                transitionName={transitionName}
-                placement={placement}
-                direction={direction}
-                options={options}
-                visible
-                getPopupContainer={getPopupContainer}
-                dropdownClassName={dropdownClassName}
-              >
-                <span>{measurePrefix}</span>
-              </KeywordTrigger>
-            </MentionsContextProvider>
-            {value.slice(measureLocation + measurePrefix.length)}
-          </div>
-        )}
-      </div>
-    );
-  }
-}
+              <span>{measurePrefix}</span>
+            </KeywordTrigger>
+          </MentionsContext.Provider>
+          {mergedValue.slice(measureLocation + measurePrefix.length)}
+        </div>
+      )}
+    </div>
+  );
+}) as React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<MentionsProps> & React.RefAttributes<MentionsRef>
+> & {
+  Option: typeof Option;
+};
+
+Mentions.defaultProps = {
+  prefixCls: 'rc-mentions',
+  prefix: '@',
+  split: ' ',
+  validateSearch: defaultValidateSearch,
+  filterOption: defaultFilterOption,
+  notFoundContent: 'Not Found',
+  rows: 1,
+};
+
+Mentions.Option = Option;
 
 export default Mentions;
diff --git a/src/MentionsContext.ts b/src/MentionsContext.ts
index a2abbd9..61f22c9 100644
--- a/src/MentionsContext.ts
+++ b/src/MentionsContext.ts
@@ -1,6 +1,6 @@
 /* tslint:disable: no-object-literal-type-assertion */
 import * as React from 'react';
-import { OptionProps } from './Option';
+import type { OptionProps } from './Option';
 
 export interface MentionsContextProps {
   notFoundContent: React.ReactNode;
@@ -12,7 +12,7 @@ export interface MentionsContextProps {
 }
 
 // We will never use default, here only to fix TypeScript warning
-const MentionsContext: React.Context<MentionsContextProps> = React.createContext(null);
+const MentionsContext: React.Context<MentionsContextProps> =
+  React.createContext(null);
 
-export const MentionsContextProvider = MentionsContext.Provider;
-export const MentionsContextConsumer = MentionsContext.Consumer;
+export default MentionsContext;
diff --git a/src/hooks/useEffectState.ts b/src/hooks/useEffectState.ts
new file mode 100644
index 0000000..d27ea94
--- /dev/null
+++ b/src/hooks/useEffectState.ts
@@ -0,0 +1,29 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export type Trigger = (callback?: VoidFunction) => void;
+
+/**
+ * Trigger a callback on state change
+ */
+export default function useEffectState(): Trigger {
+  const [effectId, setEffectId] = useState<{
+    id: number;
+    callback: VoidFunction | null;
+  }>({
+    id: 0,
+    callback: null,
+  });
+
+  const update = useCallback((callback?: VoidFunction) => {
+    setEffectId(({ id }) => ({
+      id: id + 1,
+      callback,
+    }));
+  }, []);
+
+  useEffect(() => {
+    effectId.callback?.();
+  }, [effectId]);
+
+  return update;
+}
diff --git a/src/index.ts b/src/index.ts
index e11770e..daf0fe8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,6 @@
 import Mentions from './Mentions';
+import type { MentionsProps } from './Mentions';
+
+export type { MentionsProps };
 
 export default Mentions;
diff --git a/src/util.ts b/src/util.ts
index 91ee2f3..7170b68 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,23 +1,5 @@
-import { MentionsProps } from './Mentions';
-import { OptionProps } from './Option';
-
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-type OmitFunc = <T extends object, K extends [...(keyof T)[]]>(
-  obj: T,
-  ...keys: K
-) => { [K2 in Exclude<keyof T, K[number]>]: T[K2] };
-
-export const omit: OmitFunc = (obj, ...keys) => {
-  const clone = {
-    ...obj,
-  };
-  keys.forEach(key => {
-    delete clone[key];
-  });
-
-  return clone;
-};
+import type { MentionsProps } from './Mentions';
+import type { OptionProps } from './Option';
 
 /**
  * Cut input selection into 2 part and return text before selection start
@@ -27,6 +9,10 @@ export function getBeforeSelectionText(input: HTMLTextAreaElement) {
   return input.value.slice(0, selectionStart);
 }
 
+export function toArr<T>(value: T | T[]): T[] {
+  return Array.isArray(value) ? value : [value];
+}
+
 interface MeasureIndex {
   location: number;
   prefix: string;
@@ -34,8 +20,11 @@ interface MeasureIndex {
 /**
  * Find the last match prefix index
  */
-export function getLastMeasureIndex(text: string, prefix: string | string[] = ''): MeasureIndex {
-  const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
+export function getLastMeasureIndex(
+  text: string,
+  prefix: string | string[] = '',
+): MeasureIndex {
+  const prefixList: string[] = toArr(prefix);
   return prefixList.reduce(
     (lastMatch: MeasureIndex, prefixStr): MeasureIndex => {
       const lastIndex = text.lastIndexOf(prefixStr);
@@ -91,12 +80,16 @@ function reduceText(text: string, targetText: string, split: string) {
  *  => little @light test
  */
 export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
-  const { measureLocation, prefix, targetText, selectionStart, split } = measureConfig;
+  const { measureLocation, prefix, targetText, selectionStart, split } =
+    measureConfig;
 
   // Before text will append one space if have other text
   let beforeMeasureText = text.slice(0, measureLocation);
   if (beforeMeasureText[beforeMeasureText.length - split.length] === split) {
-    beforeMeasureText = beforeMeasureText.slice(0, beforeMeasureText.length - split.length);
+    beforeMeasureText = beforeMeasureText.slice(
+      0,
+      beforeMeasureText.length - split.length,
+    );
   }
   if (beforeMeasureText) {
     beforeMeasureText = `${beforeMeasureText}${split}`;
@@ -120,7 +113,10 @@ export function replaceWithMeasure(text: string, measureConfig: MeasureConfig) {
   };
 }
 
-export function setInputSelection(input: HTMLTextAreaElement, location: number) {
+export function setInputSelection(
+  input: HTMLTextAreaElement,
+  location: number,
+) {
   input.setSelectionRange(location, location);
 
   /**
@@ -136,7 +132,10 @@ export function validateSearch(text: string, props: MentionsProps) {
   return !split || text.indexOf(split) === -1;
 }
 
-export function filterOption(input: string, { value = '' }: OptionProps): boolean {
+export function filterOption(
+  input: string,
+  { value = '' }: OptionProps,
+): boolean {
   const lowerCase = input.toLowerCase();
   return value.toLowerCase().indexOf(lowerCase) !== -1;
 }
diff --git a/tests/FullProcess.spec.jsx b/tests/FullProcess.spec.jsx
deleted file mode 100644
index 4c26cae..0000000
--- a/tests/FullProcess.spec.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { mount } from 'enzyme';
-import KeyCode from 'rc-util/lib/KeyCode';
-import React from 'react';
-import Mentions from '../src';
-import { simulateInput } from './shared/input';
-
-const { Option } = Mentions;
-
-describe('Full Process', () => {
-  function createMentions(props) {
-    return mount(
-      <Mentions {...props}>
-        <Option value="bamboo">Bamboo</Option>
-        <Option value="light">Light</Option>
-        <Option value="cat">Cat</Option>
-      </Mentions>,
-    );
-  }
-
-  it('Keyboard selection', () => {
-    const onChange = jest.fn();
-    const onSelect = jest.fn();
-    const onSearch = jest.fn();
-    const onKeyDown = jest.fn();
-    const onKeyUp = jest.fn();
-    const wrapper = createMentions({
-      onChange,
-      onKeyDown,
-      onKeyUp,
-      onSelect,
-      onSearch,
-    });
-
-    simulateInput(wrapper, '@');
-    expect(wrapper.find('DropdownMenu').props().options).toMatchObject([
-      { value: 'bamboo' },
-      { value: 'light' },
-      { value: 'cat' },
-    ]);
-
-    simulateInput(wrapper, '@a');
-    expect(wrapper.find('DropdownMenu').props().options).toMatchObject([
-      { value: 'bamboo' },
-      { value: 'cat' },
-    ]);
-    expect(onSearch).toBeCalledWith('a', '@');
-
-    wrapper.find('textarea').simulate('keyDown', {
-      which: KeyCode.DOWN,
-    });
-    wrapper.find('textarea').simulate('keyDown', {
-      which: KeyCode.ENTER,
-    });
-
-    expect(onChange).toBeCalledWith('@cat ');
-    expect(onSelect).toBeCalledWith(
-      expect.objectContaining({ value: 'cat' }),
-      '@',
-    );
-    expect(onKeyDown).toHaveBeenCalled();
-    expect(onKeyUp).toHaveBeenCalled();
-  });
-
-  it('insert into half way', () => {
-    const onChange = jest.fn();
-    const wrapper = createMentions({ onChange });
-    simulateInput(wrapper, '1 @ 2');
-
-    // Mock direct to the position
-    wrapper.find('textarea').instance().selectionStart = 3;
-    wrapper.find('textarea').simulate('keyUp', {});
-    expect(wrapper.state().measuring).toBeTruthy();
-
-    wrapper.find('textarea').simulate('keyDown', {
-      which: KeyCode.ENTER,
-    });
-
-    expect(onChange).toBeCalledWith('1 @bamboo 2');
-  });
-
-  it('reuse typed text', () => {
-    const onChange = jest.fn();
-    const wrapper = createMentions({ onChange });
-    simulateInput(wrapper, '1 @bamboo 2');
-
-    // Mock direct to the position
-    wrapper.find('textarea').instance().selectionStart = 3;
-    wrapper.find('textarea').simulate('keyUp', {});
-    expect(wrapper.state().measuring).toBeTruthy();
-
-    wrapper.find('textarea').simulate('keyDown', {
-      which: KeyCode.ENTER,
-    });
-
-    expect(onChange).toBeCalledWith('1 @bamboo 2');
-  });
-
-  it('stop measure if match split', () => {
-    const wrapper = createMentions();
-    simulateInput(wrapper, '@a');
-    expect(wrapper.state().measuring).toBeTruthy();
-    simulateInput(wrapper, '@a ');
-    expect(wrapper.state().measuring).toBeFalsy();
-  });
-
-  it('stop measure if remove prefix', () => {
-    const wrapper = createMentions();
-    simulateInput(wrapper, 'test@');
-    expect(wrapper.state().measuring).toBeTruthy();
-    simulateInput(wrapper, 'test');
-    expect(wrapper.state().measuring).toBeFalsy();
-  });
-
-  it('should not call onPressEnter when measuring', () => {
-    const onPressEnter = jest.fn();
-    const wrapper = createMentions({ onPressEnter });
-
-    simulateInput(wrapper, '@');
-    wrapper.find('textarea').simulate('keyDown', {
-      keyCode: KeyCode.ENTER,
-    });
-    expect(onPressEnter).not.toHaveBeenCalled();
-
-    simulateInput(wrapper, 'test');
-    wrapper.find('textarea').simulate('keyDown', {
-      keyCode: KeyCode.ENTER,
-    });
-    expect(onPressEnter).toHaveBeenCalled();
-  });
-
-  it('should support same value', () => {
-    const wrapper = mount(
-      <Mentions>
-        <Option value="bamboo">Bamboo</Option>
-        <Option value="bamboo" key="same_bamboo">
-          Bamboo
-        </Option>
-        <Option value="light">Light</Option>
-        <Option value="cat">Cat</Option>
-      </Mentions>,
-    );
-
-    simulateInput(wrapper, '@');
-    expect(
-      wrapper.find('li.rc-mentions-dropdown-menu-item-active').length,
-    ).toBe(1);
-  });
-
-  it('ESC', () => {
-    const wrapper = createMentions();
-
-    simulateInput(wrapper, '@');
-    expect(wrapper.state().measuring).toBe(true);
-
-    simulateInput(wrapper, '@', {
-      which: KeyCode.ESC,
-    });
-
-    expect(wrapper.state().measuring).toBe(false);
-  });
-});
diff --git a/tests/FullProcess.spec.tsx b/tests/FullProcess.spec.tsx
new file mode 100644
index 0000000..9eee1a5
--- /dev/null
+++ b/tests/FullProcess.spec.tsx
@@ -0,0 +1,168 @@
+import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import Mentions from '../src';
+import type { MentionsProps } from '../src';
+import { expectMatchOptions, expectMeasuring, simulateInput } from './util';
+
+const { Option } = Mentions;
+
+describe('Full Process', () => {
+  function createMentions(props?: MentionsProps) {
+    return render(
+      <Mentions {...props}>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>,
+    );
+  }
+
+  it('Keyboard selection', () => {
+    const onChange = jest.fn();
+    const onSelect = jest.fn();
+    const onSearch = jest.fn();
+    const onKeyDown = jest.fn();
+    const onKeyUp = jest.fn();
+    const { container } = createMentions({
+      onChange,
+      onKeyDown,
+      onKeyUp,
+      onSelect,
+      onSearch,
+    });
+
+    simulateInput(container, '@');
+    expectMatchOptions(['Bamboo', 'Light', 'Cat']);
+
+    simulateInput(container, '@a');
+    expectMatchOptions(['Bamboo', 'Cat']);
+    expect(onSearch).toBeCalledWith('a', '@');
+
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.DOWN,
+      which: KeyCode.DOWN,
+    });
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.ENTER,
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('@cat ');
+    expect(onSelect).toBeCalledWith(
+      expect.objectContaining({ value: 'cat' }),
+      '@',
+    );
+    expect(onKeyDown).toHaveBeenCalled();
+    expect(onKeyUp).toHaveBeenCalled();
+  });
+
+  it('insert into half way', () => {
+    const onChange = jest.fn();
+    const { container } = createMentions({ onChange });
+    simulateInput(container, '1 @ 2');
+
+    // Mock direct to the position
+    container.querySelector('textarea').selectionStart = 3;
+    fireEvent.keyUp(container.querySelector('textarea'), {
+      keyCode: KeyCode.SHIFT,
+      which: KeyCode.SHIFT,
+    });
+    expectMeasuring(container);
+
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.ENTER,
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('1 @bamboo 2');
+  });
+
+  it('reuse typed text', () => {
+    const onChange = jest.fn();
+    const { container } = createMentions({ onChange });
+    simulateInput(container, '1 @bamboo 2');
+
+    // Mock direct to the position
+    container.querySelector('textarea').selectionStart = 3;
+    fireEvent.keyUp(container.querySelector('textarea'), {
+      keyCode: KeyCode.SHIFT,
+      which: KeyCode.SHIFT,
+    });
+    expectMeasuring(container);
+
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.ENTER,
+      which: KeyCode.ENTER,
+    });
+
+    expect(onChange).toBeCalledWith('1 @bamboo 2');
+  });
+
+  it('stop measure if match split', () => {
+    const { container } = createMentions();
+    simulateInput(container, '@a');
+    expectMeasuring(container);
+    simulateInput(container, '@a ');
+    expectMeasuring(container, false);
+  });
+
+  it('stop measure if remove prefix', () => {
+    const { container } = createMentions();
+    simulateInput(container, 'test@');
+    expectMeasuring(container);
+    simulateInput(container, 'test');
+    expectMeasuring(container, false);
+  });
+
+  it('should not call onPressEnter when measuring', () => {
+    const onPressEnter = jest.fn();
+    const { container } = createMentions({ onPressEnter });
+
+    simulateInput(container, '@');
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.ENTER,
+      which: KeyCode.ENTER,
+    });
+    expect(onPressEnter).not.toHaveBeenCalled();
+
+    simulateInput(container, 'test');
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      keyCode: KeyCode.ENTER,
+      which: KeyCode.ENTER,
+    });
+    expect(onPressEnter).toHaveBeenCalled();
+  });
+
+  it('should support same value', () => {
+    const { container } = render(
+      <Mentions>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="bamboo" key="same_bamboo">
+          Bamboo
+        </Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>,
+    );
+
+    simulateInput(container, '@');
+    expect(
+      container.querySelectorAll('li.rc-mentions-dropdown-menu-item-active'),
+    ).toHaveLength(1);
+  });
+
+  it('ESC', () => {
+    const { container } = createMentions();
+
+    simulateInput(container, '@');
+    expectMeasuring(container);
+
+    simulateInput(container, '@', {
+      keyCode: KeyCode.ESC,
+      which: KeyCode.ESC,
+    });
+
+    expectMeasuring(container, false);
+  });
+});
diff --git a/tests/Mentions.spec.jsx b/tests/Mentions.spec.jsx
deleted file mode 100644
index f406bad..0000000
--- a/tests/Mentions.spec.jsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import toArray from 'rc-util/lib/Children/toArray';
-import Mentions from '../src';
-import { simulateInput } from './shared/input';
-
-const { Option } = Mentions;
-
-describe('Mentions', () => {
-  function createMentions(props) {
-    return mount(
-      <Mentions {...props}>
-        <Option value="bamboo">Bamboo</Option>
-        <Option value="light">Light</Option>
-        <Option value="cat">Cat</Option>
-      </Mentions>,
-    );
-  }
-
-  describe('focus test', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-    });
-
-    it('autoFocus', () => {
-      const wrapper = createMentions({ autoFocus: true });
-      expect(document.activeElement).toBe(wrapper.find('textarea').instance());
-    });
-
-    it('not lose focus if click on dropdown', () => {
-      const onBlur = jest.fn();
-      const wrapper = createMentions({
-        autoFocus: true,
-        defaultValue: '@',
-        onBlur,
-      });
-
-      // Inject to trigger measure
-      wrapper.instance().startMeasure('b', '@', 1);
-      jest.runAllTimers();
-      wrapper.update();
-
-      wrapper.find('li.rc-mentions-dropdown-menu-item').simulate('focus');
-      wrapper.find('textarea').simulate('blur');
-      wrapper.find('li.rc-mentions-dropdown-menu-item').simulate('click');
-      wrapper.find('textarea').simulate('focus'); // This is not good but code focus not work in simulate
-      jest.runAllTimers();
-
-      expect(onBlur).not.toHaveBeenCalled();
-    });
-
-    it('focus', () => {
-      const onFocus = jest.fn();
-      const wrapper = createMentions({ onFocus });
-      wrapper.find('textarea').simulate('focus');
-      expect(onFocus).toHaveBeenCalled();
-    });
-
-    it('blur', () => {
-      const onBlur = jest.fn();
-      const wrapper = createMentions({ onBlur });
-      wrapper.find('textarea').simulate('blur');
-      jest.runAllTimers();
-      expect(onBlur).toHaveBeenCalled();
-    });
-
-    it('focus() & blur()', () => {
-      const wrapper = createMentions();
-      wrapper.instance().focus();
-      expect(document.activeElement).toBe(wrapper.find('textarea').instance());
-
-      wrapper.instance().blur();
-      expect(document.activeElement).not.toBe(
-        wrapper.find('textarea').instance(),
-      );
-    });
-  });
-
-  describe('value', () => {
-    it('defaultValue', () => {
-      const wrapper = createMentions({ defaultValue: 'light' });
-      expect(wrapper.find('textarea').props().value).toBe('light');
-    });
-
-    it('controlled value', () => {
-      const wrapper = createMentions({ value: 'bamboo' });
-      expect(wrapper.find('textarea').props().value).toBe('bamboo');
-
-      wrapper.setProps({ value: 'cat' });
-      expect(wrapper.find('textarea').props().value).toBe('cat');
-
-      wrapper.setProps({ value: undefined });
-      expect(wrapper.find('textarea').props().value).toBe('');
-    });
-
-    it('onChange', () => {
-      const onChange = jest.fn();
-      const wrapper = createMentions({ onChange });
-      wrapper.find('textarea').simulate('change', {
-        target: { value: 'bamboo' },
-      });
-      expect(onChange).toHaveBeenCalledWith('bamboo');
-    });
-  });
-
-  describe('filterOption', () => {
-    it('false', () => {
-      const wrapper = createMentions({ filterOption: false });
-      simulateInput(wrapper, '@notExist');
-      expect(wrapper.find('DropdownMenu').props().options.length).toBe(3);
-    });
-
-    it('function', () => {
-      const wrapper = createMentions({
-        filterOption: (_, { value }) => value.includes('a'),
-      });
-      simulateInput(wrapper, '@notExist');
-      expect(wrapper.find('DropdownMenu').props().options.length).toBe(2);
-    });
-  });
-
-  it('notFoundContent', () => {
-    const notFoundContent = 'Bamboo Light';
-    const wrapper = createMentions({ notFoundContent });
-    simulateInput(wrapper, '@a');
-    simulateInput(wrapper, '@notExist');
-    expect(wrapper.find('DropdownMenu').props().options.length).toBe(0);
-
-    expect(
-      toArray(
-        wrapper.find('li.rc-mentions-dropdown-menu-item').props().children,
-      )[0],
-    ).toBe(notFoundContent);
-    // https://github.com/ant-design/ant-design/issues/26097
-    wrapper.find('textarea').simulate('keyDown', {
-      which: KeyCode.ENTER,
-    });
-    // stop measure
-    expect(wrapper.find('DropdownMenu').exists()).toBe(false);
-    expect(wrapper.find('textarea').prop('value')).toBe('@notExist');
-  });
-
-  describe('accessibility', () => {
-    it('hover', () => {
-      const wrapper = createMentions();
-      simulateInput(wrapper, '@');
-      wrapper
-        .find('li.rc-mentions-dropdown-menu-item')
-        .last()
-        .simulate('mouseEnter');
-      expect(
-        wrapper.find('.rc-mentions-dropdown-menu-item-active').first().text(),
-      ).toBe('Cat');
-    });
-  });
-
-  it('dropdownClassName should work', () => {
-    const wrapper = createMentions({ dropdownClassName: 'my-dropdown' });
-    simulateInput(wrapper, '@');
-    expect(
-      wrapper.find('.my-dropdown.rc-mentions-dropdown').length,
-    ).toBeTruthy();
-  });
-});
diff --git a/tests/Mentions.spec.tsx b/tests/Mentions.spec.tsx
new file mode 100644
index 0000000..05bee74
--- /dev/null
+++ b/tests/Mentions.spec.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+import Mentions from '../src';
+import type { MentionsProps } from '../src';
+import { expectMatchOptions, expectMeasuring, simulateInput } from './util';
+import { fireEvent, render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import type { MentionsRef } from '../src/Mentions';
+
+const { Option } = Mentions;
+
+describe('Mentions', () => {
+  function createMentions(
+    props?: MentionsProps & { ref?: React.Ref<MentionsRef> },
+  ) {
+    return (
+      <Mentions {...props}>
+        <Option value="bamboo">Bamboo</Option>
+        <Option value="light">Light</Option>
+        <Option value="cat">Cat</Option>
+      </Mentions>
+    );
+  }
+
+  function renderMentions(
+    props?: MentionsProps & { ref?: React.Ref<MentionsRef> },
+  ) {
+    return render(createMentions(props));
+  }
+
+  describe('focus test', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('autoFocus', () => {
+      const { container } = renderMentions({ autoFocus: true });
+      expect(document.activeElement).toBe(container.querySelector('textarea'));
+    });
+
+    it('not lose focus if click on dropdown', () => {
+      const onBlur = jest.fn();
+      const { container } = renderMentions({
+        autoFocus: true,
+        defaultValue: '@',
+        onBlur,
+      });
+
+      // Inject to trigger measure
+      simulateInput(container, '@b');
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      fireEvent.focus(
+        container.querySelector('li.rc-mentions-dropdown-menu-item'),
+      );
+      fireEvent.blur(container.querySelector('textarea'));
+      fireEvent.click(
+        container.querySelector('li.rc-mentions-dropdown-menu-item'),
+      );
+      fireEvent.focus(container.querySelector('textarea'));
+
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+
+    it('focus', () => {
+      const onFocus = jest.fn();
+      const { container } = renderMentions({ onFocus });
+      fireEvent.focus(container.querySelector('textarea'));
+      expect(onFocus).toHaveBeenCalled();
+    });
+
+    it('blur', () => {
+      const onBlur = jest.fn();
+      const { container } = renderMentions({ onBlur });
+      fireEvent.blur(container.querySelector('textarea'));
+      act(() => {
+        jest.runAllTimers();
+      });
+      expect(onBlur).toHaveBeenCalled();
+    });
+
+    it('focus() & blur()', () => {
+      const mentionsRef = React.createRef<MentionsRef>();
+      const { container } = renderMentions({ ref: mentionsRef });
+      mentionsRef.current.focus();
+      expect(document.activeElement).toBe(container.querySelector('textarea'));
+
+      mentionsRef.current.blur();
+      expect(document.activeElement).not.toBe(
+        container.querySelector('textarea'),
+      );
+    });
+  });
+
+  describe('value', () => {
+    it('defaultValue', () => {
+      const { container } = renderMentions({ defaultValue: 'light' });
+      expect(container.querySelector('textarea').value).toBe('light');
+    });
+
+    it('controlled value', () => {
+      const { container, rerender } = renderMentions({ value: 'bamboo' });
+      expect(container.querySelector('textarea').value).toBe('bamboo');
+
+      rerender(createMentions({ value: 'cat' }));
+      expect(container.querySelector('textarea').value).toBe('cat');
+
+      rerender(createMentions({ value: undefined }));
+      expect(container.querySelector('textarea').value).toBe('');
+    });
+
+    it('onChange', () => {
+      const onChange = jest.fn();
+      const { container } = renderMentions({ onChange });
+      fireEvent.change(container.querySelector('textarea'), {
+        target: { value: 'bamboo' },
+      });
+      expect(onChange).toHaveBeenCalledWith('bamboo');
+    });
+  });
+
+  describe('filterOption', () => {
+    it('false', () => {
+      const { container } = renderMentions({ filterOption: false });
+      simulateInput(container, '@notExist');
+      expectMatchOptions(['Bamboo', 'Light', 'Cat']);
+    });
+
+    it('function', () => {
+      const { container } = renderMentions({
+        filterOption: (_, { value }) => value.includes('a'),
+      });
+      simulateInput(container, '@notExist');
+      expectMatchOptions(['Bamboo', 'Cat']);
+    });
+  });
+
+  it('notFoundContent', () => {
+    const notFoundContent = 'Bamboo Light';
+    const { container } = renderMentions({ notFoundContent });
+    simulateInput(container, '@a');
+    simulateInput(container, '@notExist');
+    expectMatchOptions([notFoundContent]);
+
+    // https://github.com/ant-design/ant-design/issues/26097
+    fireEvent.keyDown(container.querySelector('textarea'), {
+      which: KeyCode.ENTER,
+      keyCode: KeyCode.ENTER,
+    });
+    // stop measure
+    expectMeasuring(container, false);
+    expect(container.querySelector('textarea').value).toBe('@notExist');
+  });
+
+  describe('accessibility', () => {
+    it('hover', () => {
+      const { container } = renderMentions();
+      simulateInput(container, '@');
+      fireEvent.mouseEnter(
+        container.querySelector('li.rc-mentions-dropdown-menu-item:last-child'),
+      );
+      expect(
+        container.querySelector('.rc-mentions-dropdown-menu-item-active')
+          .textContent,
+      ).toBe('Cat');
+    });
+  });
+
+  it('dropdownClassName should work', () => {
+    const { container } = renderMentions({ dropdownClassName: 'my-dropdown' });
+    simulateInput(container, '@');
+    expect(
+      container.querySelector('.my-dropdown.rc-mentions-dropdown'),
+    ).toBeTruthy();
+  });
+});
diff --git a/tests/Option.spec.jsx b/tests/Option.spec.tsx
similarity index 58%
rename from tests/Option.spec.jsx
rename to tests/Option.spec.tsx
index ff78f74..aa4a38c 100644
--- a/tests/Option.spec.jsx
+++ b/tests/Option.spec.tsx
@@ -1,4 +1,4 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import Mentions from '../src';
 
@@ -7,7 +7,7 @@ const { Option } = Mentions;
 describe('Option', () => {
   // Option is a placeholder component. It should render nothing.
   it('should be empty', () => {
-    const wrapper = mount(<Option>Nothing</Option>);
-    expect(wrapper.instance()).toBe(null);
+    const { container } = render(<Option>Nothing</Option>);
+    expect(container.childElementCount).toBe(0);
   });
 });
diff --git a/tests/setupFilesAfterEnv.ts b/tests/setupFilesAfterEnv.ts
new file mode 100644
index 0000000..331666c
--- /dev/null
+++ b/tests/setupFilesAfterEnv.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
\ No newline at end of file
diff --git a/tests/shared/input.js b/tests/shared/input.js
deleted file mode 100644
index 4a4a3e6..0000000
--- a/tests/shared/input.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-export function simulateInput(wrapper, text = '', keyEvent) {
-  const lastChar = text[text.length - 1];
-  const myKeyEvent = keyEvent || {
-    which: lastChar.charCodeAt(0),
-    key: lastChar,
-  };
-
-  wrapper.find('textarea').simulate('keyDown', myKeyEvent);
-
-  const textareaInstance = wrapper.find('textarea').instance();
-  textareaInstance.value = text;
-  textareaInstance.selectionStart = text.length;
-
-  if (!keyEvent) {
-    wrapper.find('textarea').simulate('change', {
-      target: { value: text },
-    });
-  }
-
-  textareaInstance.selectionStart = text.length;
-  wrapper.find('textarea').simulate('keyUp', myKeyEvent);
-
-  wrapper.update();
-}
-/* eslint-enable */
diff --git a/tests/util.ts b/tests/util.ts
new file mode 100644
index 0000000..ad38c94
--- /dev/null
+++ b/tests/util.ts
@@ -0,0 +1,41 @@
+import { fireEvent } from '@testing-library/react';
+
+export function simulateInput(
+  container: HTMLElement,
+  text = '',
+  keyEvent?: any,
+) {
+  const lastChar = text[text.length - 1];
+  const myKeyEvent = keyEvent || {
+    which: lastChar.charCodeAt(0),
+    keyCode: lastChar.charCodeAt(0),
+    key: lastChar,
+  };
+
+  fireEvent.keyDown(container.querySelector('textarea'), myKeyEvent);
+
+  if (!keyEvent) {
+    fireEvent.change(container.querySelector('textarea'), {
+      target: { value: text, selectionStart: text.length },
+    });
+  }
+
+  fireEvent.keyUp(container.querySelector('textarea'), myKeyEvent);
+}
+
+export function expectMatchOptions(targetLabels: string[]) {
+  const list = Array.from(
+    document.querySelectorAll('.rc-mentions-dropdown-menu-item'),
+  ).map(item => item.textContent);
+  expect(list).toEqual(targetLabels);
+}
+
+export function expectMeasuring(container: HTMLElement, measuring = true) {
+  const expected = expect(container.querySelector('.rc-mentions-measure'));
+
+  if (measuring) {
+    expected.toBeTruthy();
+  } else {
+    expected.toBeFalsy();
+  }
+}