diff --git a/packages/p2p/src/components/toggle-container/__test__/toggle-container.spec.js b/packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
similarity index 74%
rename from packages/p2p/src/components/toggle-container/__test__/toggle-container.spec.js
rename to packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
index 5b749e569bec..633599887de8 100644
--- a/packages/p2p/src/components/toggle-container/__test__/toggle-container.spec.js
+++ b/packages/p2p/src/components/toggle-container/__tests__/toggle-container.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import ToggleContainer from '../toggle-container.jsx';
+import ToggleContainer from '../toggle-container';
 
 describe('<ToggleContainer/>', () => {
     it('should act as a wrapper for the child component', () => {
@@ -10,6 +10,7 @@ describe('<ToggleContainer/>', () => {
             </ToggleContainer>
         );
 
+        expect(screen.getByTestId('dt_toggle_container')).toHaveClass('toggle-container');
         expect(screen.getByText('Child component')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/toggle-container/index.ts b/packages/p2p/src/components/toggle-container/index.ts
new file mode 100644
index 000000000000..585a6d997dfe
--- /dev/null
+++ b/packages/p2p/src/components/toggle-container/index.ts
@@ -0,0 +1,4 @@
+import ToggleContainer from './toggle-container';
+import './toggle-container.scss';
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/components/toggle-container/toggle-container.jsx b/packages/p2p/src/components/toggle-container/toggle-container.jsx
deleted file mode 100644
index 6e9e7a9e8440..000000000000
--- a/packages/p2p/src/components/toggle-container/toggle-container.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import './toggle-container.scss';
-
-const ToggleContainer = ({ children }) => <div className='toggle-container'>{children}</div>;
-
-ToggleContainer.propTypes = {
-    children: PropTypes.any,
-};
-
-export default ToggleContainer;
diff --git a/packages/p2p/src/components/toggle-container/toggle-container.tsx b/packages/p2p/src/components/toggle-container/toggle-container.tsx
new file mode 100644
index 000000000000..39ab4aa39b7a
--- /dev/null
+++ b/packages/p2p/src/components/toggle-container/toggle-container.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ToggleContainer = ({ children }: React.PropsWithChildren<unknown>) => (
+    <div className='toggle-container' data-testid='dt_toggle_container'>
+        {children}
+    </div>
+);
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
index 82ffe3ca7aa4..827eca410da5 100644
--- a/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
+++ b/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite';
 import classNames from 'classnames';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import SortDropdown from 'Pages/buy-sell/sort-dropdown';
 import { useStores } from 'Stores';
 import CurrencyDropdown from 'Pages/buy-sell/currency-dropdown.jsx';
diff --git a/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
index f9604ab611d9..ed2e7f65255c 100644
--- a/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
+++ b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ButtonToggle } from '@deriv/components';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import { localize } from 'Components/i18next';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { useStores } from 'Stores';
diff --git a/packages/p2p/src/pages/orders/order-table/order-table.jsx b/packages/p2p/src/pages/orders/order-table/order-table.jsx
index 7eeba097358f..4b8d7248fd88 100644
--- a/packages/p2p/src/pages/orders/order-table/order-table.jsx
+++ b/packages/p2p/src/pages/orders/order-table/order-table.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ButtonToggle } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import { order_list } from 'Constants/order-list';
 import { useStores } from 'Stores';
 import OrderTableContent from './order-table-content.jsx';