diff --git a/docs/.eslintrc.js b/docs/.eslintrc.js
index 61a9396e7..a994a0314 100644
--- a/docs/.eslintrc.js
+++ b/docs/.eslintrc.js
@@ -16,8 +16,6 @@ module.exports = {
     browser: true,
   },
   rules: {
-    'ember/no-classic-classes': 'off',
-    'ember/no-classic-components': 'off',
     'ember/classic-decorator-no-classic-methods': 'off',
     'ember/no-computed-properties-in-native-classes': 'off',
   },
diff --git a/docs/app/components/custom-group-component.js b/docs/app/components/custom-group-component.js
deleted file mode 100644
index b35480de1..000000000
--- a/docs/app/components/custom-group-component.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* eslint-disable ember/classic-decorator-hooks, ember/require-tagless-components */
-import Component from '@ember/component';
-
-export default class CustomGroupComponent extends Component {
-  init() {
-    super.init(...arguments);
-    this.onInit?.bind(this)();
-  }
-}
diff --git a/docs/app/components/list-of-countries.js b/docs/app/components/list-of-countries.js
deleted file mode 100644
index 45d6f1f51..000000000
--- a/docs/app/components/list-of-countries.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-disable ember/require-tagless-components */
-import Component from '@ember/component';
-
-export default class ListOfCountriesComponent extends Component {}
diff --git a/docs/app/templates/components/custom-group-component.hbs b/docs/app/templates/components/custom-group-component.hbs
deleted file mode 100644
index 4e3c8c1a8..000000000
--- a/docs/app/templates/components/custom-group-component.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<div class="custom-component">{{yield}}</div>
\ No newline at end of file
diff --git a/docs/app/templates/components/list-of-countries.hbs b/docs/app/templates/components/list-of-countries.hbs
deleted file mode 100644
index 6e86e62ac..000000000
--- a/docs/app/templates/components/list-of-countries.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-<p>
-  Countries:
-</p>
-<ul>
-  {{#if @extra.field}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{get option @extra.field}}
-      </li>
-    {{/each}}
-  {{else}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{option.name}}
-      </li>
-    {{/each}}
-  {{/if}}
-</ul>
\ No newline at end of file
diff --git a/test-app/app/components/custom-group-component.js b/test-app/app/components/custom-group-component.js
index b35480de1..64a80d234 100644
--- a/test-app/app/components/custom-group-component.js
+++ b/test-app/app/components/custom-group-component.js
@@ -1,9 +1,9 @@
-/* eslint-disable ember/classic-decorator-hooks, ember/require-tagless-components */
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class CustomGroupComponent extends Component {
-  init() {
-    super.init(...arguments);
+  @action
+  setup() {
     this.onInit?.bind(this)();
   }
 }
diff --git a/test-app/app/components/list-of-countries.js b/test-app/app/components/list-of-countries.js
index 45d6f1f51..4dbe562bf 100644
--- a/test-app/app/components/list-of-countries.js
+++ b/test-app/app/components/list-of-countries.js
@@ -1,4 +1,3 @@
-/* eslint-disable ember/require-tagless-components */
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 export default class ListOfCountriesComponent extends Component {}
diff --git a/test-app/app/templates/components/custom-group-component.hbs b/test-app/app/templates/components/custom-group-component.hbs
index 4e3c8c1a8..c49c60ef1 100644
--- a/test-app/app/templates/components/custom-group-component.hbs
+++ b/test-app/app/templates/components/custom-group-component.hbs
@@ -1 +1 @@
-<div class="custom-component">{{yield}}</div>
\ No newline at end of file
+<div class="custom-component" {{did-insert this.setup}}>{{yield}}</div>
\ No newline at end of file
diff --git a/test-app/app/templates/components/list-of-countries.hbs b/test-app/app/templates/components/list-of-countries.hbs
index 6e86e62ac..d49e0e5b8 100644
--- a/test-app/app/templates/components/list-of-countries.hbs
+++ b/test-app/app/templates/components/list-of-countries.hbs
@@ -1,18 +1,20 @@
-<p>
-  Countries:
-</p>
-<ul>
-  {{#if @extra.field}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{get option @extra.field}}
-      </li>
-    {{/each}}
-  {{else}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{option.name}}
-      </li>
-    {{/each}}
-  {{/if}}
-</ul>
\ No newline at end of file
+<div class="ember-power-select-options">
+  <p>
+    Countries:
+  </p>
+  <ul>
+    {{#if @extra.field}}
+      {{#each @options as |option index|}}
+        <li>
+          {{index}}. {{get option @extra.field}}
+        </li>
+      {{/each}}
+    {{else}}
+      {{#each @options as |option index|}}
+        <li>
+          {{index}}. {{option.name}}
+        </li>
+      {{/each}}
+    {{/if}}
+  </ul>
+</div>
\ No newline at end of file
diff --git a/test-app/tests/integration/components/power-select/customization-with-components-test.js b/test-app/tests/integration/components/power-select/customization-with-components-test.js
index e14f6aa76..1e5de76fc 100644
--- a/test-app/tests/integration/components/power-select/customization-with-components-test.js
+++ b/test-app/tests/integration/components/power-select/customization-with-components-test.js
@@ -396,7 +396,6 @@ module(
     test('`@groupComponent` has extension points', async function (assert) {
       this.groupedNumbers = groupedNumbers;
       let numberOfGroups = 5; // number of groups in groupedNumbers
-      assert.expect(4 * numberOfGroups);
 
       let extra = { foo: 'bar' };
       this.extra = extra;
@@ -419,6 +418,10 @@ module(
     `);
 
       await clickTrigger();
+
+      assert
+        .dom('.ember-power-select-options .custom-component')
+        .exists({ count: numberOfGroups });
     });
 
     test('the power-select-multiple placeholder can be customized using `@placeholderComponent`', async function (assert) {
diff --git a/test-app/tests/integration/components/power-select/customization-with-extending-components-test.js b/test-app/tests/integration/components/power-select/customization-with-extending-components-test.js
index c247c4301..3d1c6bd07 100644
--- a/test-app/tests/integration/components/power-select/customization-with-extending-components-test.js
+++ b/test-app/tests/integration/components/power-select/customization-with-extending-components-test.js
@@ -48,13 +48,14 @@ module(
       <PowerSelect 
         @options={{this.countries}} 
         @selected={{this.country}} 
-        @optionsComponent={{component "list-of-countries"}} 
+        @optionsComponent={{component "list-of-countries"}}
         @onChange={{fn (mut this.foo)}} as |country|>
         {{country.name}}
       </PowerSelect>
     `);
 
       await clickTrigger();
+
       assert
         .dom('.ember-power-select-options')
         .includesText('Countries:', 'The given component is rendered');