diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx
index 63c39eb5b6f..092dfd3cfec 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx
+++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx
@@ -3,7 +3,7 @@
  *
  */
 
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, cleanup } from '@testing-library/react'
 import React from 'react'
 import {
   mount,
@@ -35,71 +35,71 @@ describe('ToggleButton component', () => {
   })
 
   it('has correct state after "click" trigger', () => {
-    const Comp = mount(<Component {...props} />)
+    const { rerender } = render(<Component {...props} />)
 
     // default checked value has to be false
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('false')
 
-    Comp.find('button').simulate('click') // we could send inn the event data structure like this: , { target: { checked: true } }
+    fireEvent.click(document.querySelector('button')) // we could send inn the event data structure like this: , { target: { checked: true } }
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('true')
 
-    Comp.find('button').simulate('click')
+    fireEvent.click(document.querySelector('button'))
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('false')
 
     // also check if getDerivedStateFromProps sets the state as expected
-    Comp.setProps({ checked: true })
+    rerender(<Component {...props} checked={true} />)
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('true')
   })
 
   it('has correct variant', () => {
-    const Comp = mount(<Component variant="checkbox" checked={false} />)
+    const { rerender } = render(
+      <Component variant="checkbox" checked={false} />
+    )
 
     // default checked value has to be false
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('false')
 
-    Comp.find('button').simulate('click') // we could send inn the event data structure like this: , { target: { checked: true } }
+    fireEvent.click(document.querySelector('button')) // we could send inn the event data structure like this: , { target: { checked: true } }
     expect(
-      Comp.find('.dnb-checkbox__input')
-        .instance()
+      document
+        .querySelector('.dnb-checkbox__input')
         .getAttribute('data-checked')
     ).toBe('true')
-    expect(Comp.find('.dnb-checkbox__button').exists()).toBe(true)
+    expect(document.querySelector('.dnb-checkbox__button')).toBeTruthy()
 
-    Comp.setProps({
-      variant: 'radio',
-    })
+    rerender(<Component variant="radio" checked={false} />)
 
-    expect(Comp.find('.dnb-radio__button').exists()).toBe(true)
+    expect(document.querySelector('.dnb-radio__button')).toBeTruthy()
     expect(
-      Comp.find('.dnb-radio__input')
-        .instance()
+      document
+        .querySelector('.dnb-radio__input')
         .getAttribute('data-checked')
     ).toBe('true')
 
-    Comp.find('button').simulate('click') // we could send inn the event data structure like this: , { target: { checked: true } }
+    fireEvent.click(document.querySelector('button')) // we could send inn the event data structure like this: , { target: { checked: true } }
     expect(
-      Comp.find('.dnb-radio__input')
-        .instance()
+      document
+        .querySelector('.dnb-radio__input')
         .getAttribute('data-checked')
     ).toBe('false')
   })
@@ -107,12 +107,12 @@ describe('ToggleButton component', () => {
   it('has "on_change" event which will trigger on a button click', () => {
     const my_event = jest.fn()
     const myEvent = jest.fn()
-    const Comp = mount(
+    render(
       <Component on_change={my_event} onChange={myEvent} checked={false} />
     )
 
     // first click
-    Comp.find('button').simulate('click')
+    fireEvent.click(document.querySelector('button'))
     expect(my_event).toHaveBeenCalled()
     expect(my_event.mock.calls[0][0].checked).toBe(true)
 
@@ -121,7 +121,7 @@ describe('ToggleButton component', () => {
     expect(myEvent.mock.calls[0][0].checked).toBe(true)
 
     // second click
-    Comp.find('button').simulate('click')
+    fireEvent.click(document.querySelector('button'))
     expect(my_event.mock.calls[1][0].checked).toBe(false)
   })
 
@@ -150,89 +150,88 @@ describe('ToggleButton component', () => {
     }
 
     const TestStates = (Comp) => {
+      render(Comp)
       // re-render + default state is true
-      Comp.find('button#rerender').simulate('click')
+      fireEvent.click(document.querySelector('button#rerender'))
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('true')
       expect(
-        Comp.find('button.dnb-toggle-button__button')
-          .instance()
+        document
+          .querySelector('button.dnb-toggle-button__button')
           .getAttribute('aria-pressed')
       ).toBe('true')
 
       // change it to false
-      Comp.find('button.dnb-toggle-button__button').simulate('click')
+      fireEvent.click(
+        document.querySelector('button.dnb-toggle-button__button')
+      )
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
       expect(
-        Comp.find('button.dnb-toggle-button__button')
-          .instance()
+        document
+          .querySelector('button.dnb-toggle-button__button')
           .getAttribute('aria-pressed')
       ).toBe('false')
 
       // set it to true
-      Comp.find('button#set-state').simulate('click')
+      fireEvent.click(document.querySelector('button#set-state'))
       expect(
-        Comp.find('button.dnb-toggle-button__button')
-          .instance()
+        document
+          .querySelector('button.dnb-toggle-button__button')
           .getAttribute('aria-pressed')
       ).toBe('true')
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('true')
 
       // reset it with undefined to false
-      Comp.find('button#reset-undefined').simulate('click')
+      fireEvent.click(document.querySelector('button#reset-undefined'))
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
 
       // set it to true + reset it with null to false
-      Comp.find('button#set-state').simulate('click')
-      Comp.find('button#reset-null').simulate('click')
+      fireEvent.click(document.querySelector('button#set-state'))
+      fireEvent.click(document.querySelector('button#reset-null'))
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
 
       // re-render + still false
-      Comp.find('button#rerender').simulate('click')
+      fireEvent.click(document.querySelector('button#rerender'))
       expect(
-        Comp.find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
+
+      cleanup()
     }
 
-    TestStates(mount(<ControlledVsUncontrolled />))
+    TestStates(<ControlledVsUncontrolled />)
     TestStates(
-      mount(
-        <React.StrictMode>
-          <ControlledVsUncontrolled />
-        </React.StrictMode>
-      )
+      <React.StrictMode>
+        <ControlledVsUncontrolled />
+      </React.StrictMode>
     )
   })
 
   it('has a disabled attribute, once we set disabled to true', () => {
-    const Comp = mount(<Component />)
-    Comp.setProps({
-      disabled: true,
-    })
-    expect(Comp.find('button').instance().hasAttribute('disabled')).toBe(
-      true
-    )
+    const { rerender } = render(<Component />)
+    rerender(<Component disabled={true} />)
+    expect(document.querySelector('button[disabled]')).toBeTruthy()
   })
 
   it('should support enter key', () => {
@@ -287,39 +286,84 @@ describe('ToggleButton component', () => {
 
 describe('ToggleButton group component', () => {
   // then test the state management
-  const Comp = mount(
-    <Component.Group label="Label" id="group">
-      <Component
-        id="toggle-button-1"
-        text="ToggleButton 1"
-        variant="radio"
-      />
-      <Component
-        id="toggle-button-2"
-        text="ToggleButton 2"
-        variant="radio"
-        checked
-      />
-    </Component.Group>
-  )
 
   // mount compare the snapshot
   it('have to match group snapshot', () => {
+    const Comp = mount(
+      <Component.Group label="Label" id="group">
+        <Component
+          id="toggle-button-1"
+          text="ToggleButton 1"
+          variant="radio"
+        />
+        <Component
+          id="toggle-button-2"
+          text="ToggleButton 2"
+          variant="radio"
+          checked
+        />
+      </Component.Group>
+    )
     expect(toJson(Comp)).toMatchSnapshot()
   })
 
   it('should validate with ARIA rules', async () => {
+    const Comp = mount(
+      <Component.Group label="Label" id="group">
+        <Component
+          id="toggle-button-1"
+          text="ToggleButton 1"
+          variant="radio"
+        />
+        <Component
+          id="toggle-button-2"
+          text="ToggleButton 2"
+          variant="radio"
+          checked
+        />
+      </Component.Group>
+    )
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
 
   it('has to have variant="radio', () => {
-    expect(Comp.find('.dnb-radio__button').exists()).toBe(true)
+    render(
+      <Component.Group label="Label" id="group">
+        <Component
+          id="toggle-button-1"
+          text="ToggleButton 1"
+          variant="radio"
+        />
+        <Component
+          id="toggle-button-2"
+          text="ToggleButton 2"
+          variant="radio"
+          checked
+        />
+      </Component.Group>
+    )
+    expect(document.querySelector('.dnb-radio__button')).toBeTruthy()
   })
 
   it('has to have correct aria-pressed', () => {
+    render(
+      <Component.Group label="Label" id="group">
+        <Component
+          id="toggle-button-1"
+          text="ToggleButton 1"
+          variant="radio"
+        />
+        <Component
+          id="toggle-button-2"
+          text="ToggleButton 2"
+          variant="radio"
+          checked
+        />
+      </Component.Group>
+    )
     expect(
-      Comp.find('button#toggle-button-2')
-        .instance()
+      document
+        .querySelector('button#toggle-button-2')
         .hasAttribute('aria-pressed')
     ).toBe(true)
   })
@@ -327,7 +371,7 @@ describe('ToggleButton group component', () => {
   it('has "on_change" event which will trigger on a button click', () => {
     const my_event = jest.fn()
     const myEvent = jest.fn()
-    const Comp = mount(
+    render(
       <Component.Group
         id="group"
         on_change={my_event}
@@ -353,7 +397,7 @@ describe('ToggleButton group component', () => {
     )
 
     // first click
-    Comp.find('button#toggle-button-1').simulate('click')
+    fireEvent.click(document.querySelector('button#toggle-button-1'))
     expect(my_event).toHaveBeenCalled()
     expect(my_event.mock.calls[0][0].value).toBe('first')
 
@@ -366,7 +410,7 @@ describe('ToggleButton group component', () => {
       prop: 'value-1',
     })
 
-    Comp.find('button#toggle-button-2').simulate('click')
+    fireEvent.click(document.querySelector('button#toggle-button-2'))
     expect(my_event.mock.calls[1][0].value).toBe('second')
     expect(my_event.mock.calls[1][0].event.target.dataset).toMatchObject({
       attr: 'value',
@@ -376,7 +420,7 @@ describe('ToggleButton group component', () => {
 
   it('has multiselect "on_change" event which will trigger on a button click', () => {
     const my_event = jest.fn()
-    const Comp = mount(
+    render(
       <Component.Group
         id="group"
         on_change={my_event}
@@ -397,22 +441,50 @@ describe('ToggleButton group component', () => {
     )
 
     // first click
-    Comp.find('button#toggle-button-1').simulate('click')
+    fireEvent.click(document.querySelector('button#toggle-button-1'))
 
     expect(my_event).toHaveBeenCalled()
     expect(my_event.mock.calls.length).toBe(1)
     expect(my_event.mock.calls[0][0]).toHaveProperty('values')
     expect(my_event.mock.calls[0][0].values).toEqual(['second', 'first'])
-    expect(Comp.state().values).toEqual(['second', 'first'])
+    expect(
+      document
+        .querySelector('#toggle-button-1')
+        .getAttribute('aria-pressed')
+    ).toBe('true')
+    expect(
+      document
+        .querySelector('#toggle-button-2')
+        .getAttribute('aria-pressed')
+    ).toBe('true')
 
     // second click
-    Comp.find('button#toggle-button-1').simulate('click')
+    fireEvent.click(document.querySelector('button#toggle-button-1'))
     expect(my_event.mock.calls[1][0].values).toEqual(['second'])
-    expect(Comp.state().values).toEqual(['second'])
+    expect(
+      document
+        .querySelector('#toggle-button-1')
+        .getAttribute('aria-pressed')
+    ).toBe('false')
+    expect(
+      document
+        .querySelector('#toggle-button-2')
+        .getAttribute('aria-pressed')
+    ).toBe('true')
 
     // third click
-    Comp.find('button#toggle-button-2').simulate('click')
+    fireEvent.click(document.querySelector('button#toggle-button-2'))
     expect(my_event.mock.calls[2][0].values).toEqual([])
+    expect(
+      document
+        .querySelector('#toggle-button-1')
+        .getAttribute('aria-pressed')
+    ).toBe('false')
+    expect(
+      document
+        .querySelector('#toggle-button-2')
+        .getAttribute('aria-pressed')
+    ).toBe('false')
   })
 
   it('can be changed from props', () => {
@@ -448,96 +520,96 @@ describe('ToggleButton group component', () => {
       )
     }
 
-    const Comp = mount(<GroupOf />)
+    render(<GroupOf />)
 
-    const first = Comp.find('button#toggle-button-1')
-    const second = Comp.find('button#toggle-button-2')
+    const first = document.querySelector('button#toggle-button-1')
+    const second = document.querySelector('button#toggle-button-2')
 
-    expect(first.instance().getAttribute('aria-pressed')).toBe('false')
-    expect(second.instance().getAttribute('aria-pressed')).toBe('true')
+    expect(first.getAttribute('aria-pressed')).toBe('false')
+    expect(second.getAttribute('aria-pressed')).toBe('true')
 
-    Comp.find('button#select-all').simulate('click')
+    fireEvent.click(document.querySelector('button#select-all'))
 
-    expect(first.instance().getAttribute('aria-pressed')).toBe('true')
-    expect(second.instance().getAttribute('aria-pressed')).toBe('true')
+    expect(first.getAttribute('aria-pressed')).toBe('true')
+    expect(second.getAttribute('aria-pressed')).toBe('true')
 
-    Comp.find('button#deselect-all').simulate('click')
+    fireEvent.click(document.querySelector('button#deselect-all'))
 
-    expect(first.instance().getAttribute('aria-pressed')).toBe('false')
-    expect(second.instance().getAttribute('aria-pressed')).toBe('false')
+    expect(first.getAttribute('aria-pressed')).toBe('false')
+    expect(second.getAttribute('aria-pressed')).toBe('false')
   })
 
   it('will let their items to be check/uncheck by its siblings', () => {
-    const Comp = mount(
-      <Component.Group id="group" multiselect={true}>
-        <Component
-          variant="checkbox"
-          id="toggle-button-1"
-          text="ToggleButton 1"
-          value="first"
-        />
-        <Component
-          variant="checkbox"
-          id="toggle-button-2"
-          text="ToggleButton 2"
-          value="second"
-        />
-      </Component.Group>
-    )
-
-    expect(Comp.state().values).toEqual(undefined)
+    const TestComp = () => {
+      return (
+        <Component.Group id="group" multiselect={true}>
+          <Component
+            variant="checkbox"
+            id="toggle-button-1"
+            text="ToggleButton 1"
+            value="first"
+          />
+          <Component
+            variant="checkbox"
+            id="toggle-button-2"
+            text="ToggleButton 2"
+            value="second"
+          />
+        </Component.Group>
+      )
+    }
 
     const TestButton = (Comp, id) => {
+      render(Comp)
+
       const sel = `button#${id}`
 
       expect(
-        Comp.find(sel)
-          .find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector(sel)
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
 
-      Comp.find(sel).simulate('click')
-
+      fireEvent.click(document.querySelector(sel))
       expect(
-        Comp.find(sel)
-          .find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector(sel)
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('true')
-      expect(Comp.find(sel).instance().getAttribute('aria-pressed')).toBe(
-        'true'
-      )
-
-      Comp.find(sel).simulate('click')
+      expect(
+        document.querySelector(sel).getAttribute('aria-pressed')
+      ).toBe('true')
 
-      expect(Comp.find(sel).instance().getAttribute('aria-pressed')).toBe(
-        'false'
-      )
-      expect(Comp.find('.dnb-toggle-button--checked').exists(sel)).toBe(
-        false
-      )
+      fireEvent.click(document.querySelector(sel))
       expect(
-        Comp.find(sel)
-          .find('.dnb-checkbox__input')
-          .instance()
+        document.querySelector(sel).getAttribute('aria-pressed')
+      ).toBe('false')
+      expect(
+        document.querySelector('.dnb-toggle-button--checked')
+      ).toBeFalsy()
+      expect(
+        document
+          .querySelector(sel)
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('false')
 
-      Comp.find(sel).simulate('click')
+      fireEvent.click(document.querySelector(sel))
       expect(
-        Comp.find(sel)
-          .find('.dnb-checkbox__input')
-          .instance()
+        document
+          .querySelector(sel)
+          .querySelector('.dnb-checkbox__input')
           .getAttribute('data-checked')
       ).toBe('true')
+
+      cleanup()
     }
 
-    TestButton(Comp, 'toggle-button-1')
-    expect(Comp.state().values).toEqual(['first'])
+    TestButton(<TestComp />, 'toggle-button-1')
 
-    TestButton(Comp, 'toggle-button-2')
-    expect(Comp.state().values).toEqual(['first', 'second'])
+    TestButton(<TestComp />, 'toggle-button-2')
   })
 
   it('should support spacing props', () => {