diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
index 61cac13dead..6b3610a0b9b 100644
--- a/src/Form/form-control.mdx
+++ b/src/Form/form-control.mdx
@@ -298,6 +298,7 @@ See [react-imask](https://imask.js.org) for documentation on available props.
 ```jsx live
 () => {
   const [value, setValue] = useState('');
+  console.log(value);
 
   return (
     <Form.Group>
@@ -306,13 +307,9 @@ See [react-imask](https://imask.js.org) for documentation on available props.
         mask="+{1}(000)000-00-00"
         leadingElement={<Icon src={FavoriteBorder} />}
         trailingElement={<Icon src={Verified} />}
-        floatingLabel="What kind of cats?"
+        floatingLabel="What is your phone number?"
         value={value}
-        unmask
-        onChange={(e) => setValue(e.target.value)}
-          onAccept={
-            (value) => console.log(value)
-          }
+        onAccept={(_, mask) => setValue(mask._unmaskedValue)}
       />
     </Form.Group>
   );
diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx
index 9702464f7e7..7c622f7f825 100644
--- a/src/Form/tests/FormControl.test.jsx
+++ b/src/Form/tests/FormControl.test.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import React, { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import FormControl from '../FormControl';
 
@@ -7,20 +7,57 @@ const ref = {
   current: null,
 };
 
+// eslint-disable-next-line react/prop-types
+function Component({ isClearValue }) {
+  const onChangeFunc = jest.fn();
+  const [inputValue, setInputValue] = useState('');
+
+  return (
+    <FormControl
+      hasInputMask
+      mask="+{1}(000)000-00-00"
+      value={inputValue}
+      onChange={isClearValue ? onChangeFunc : (e) => setInputValue(e.target.value)}
+      onAccept={isClearValue ? onChangeFunc : (value) => setInputValue(value)}
+      data-testid="form-control-with-mask"
+    />
+  );
+}
+
 describe('FormControl', () => {
   it('textarea changes its height with autoResize prop', () => {
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
-    const wrapper = mount((
-      <FormControl as="textarea" autoResize onChange={onChangeFunc} />
-    ));
+    render(
+      <FormControl as="textarea" autoResize onChange={onChangeFunc} data-testid="form-control-textarea" />,
+    );
+
     ref.scrollHeight = 180;
     ref.offsetHeight = 90;
     ref.clientHeight = 88;
+
+    const textarea = screen.getByTestId('form-control-textarea');
+
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
-    wrapper.find('textarea').simulate('change');
+
+    fireEvent.change(textarea, { target: { value: 'new text' } });
+
     expect(onChangeFunc).toHaveBeenCalledTimes(1);
-    expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsets}px`);
+    expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
+  });
+  it('should apply and accept input mask for phone numbers', () => {
+    render(<Component />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    fireEvent.change(input, { target: { value: '1234567890' } });
+    expect(input.value).toBe('+1(234)567-89-0');
+  });
+  it('should be cleared from the mask elements value', () => {
+    render(<Component isClearValue />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    fireEvent.change(input, { target: { value: '1234567890' } });
+    expect(input.value).toBe('1234567890');
   });
 });