diff --git a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.js b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.js
index 385136b51ac..200bed6cbdb 100644
--- a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.js
+++ b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.js
@@ -2,27 +2,10 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-import { browser } from "@web/core/browser/browser";
-
-const { Component, onWillStart, useState } = owl;
+const { Component } = owl;
 
 export class CallSettingsMenu extends Component {
 
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        this.state = useState({
-            userDevices: undefined,
-        });
-        onWillStart(() => this._willStart());
-    }
-
-    async _willStart() {
-        this.state.userDevices = await browser.navigator.mediaDevices.enumerateDevices();
-    }
-
     /**
      * @returns {CallSettingsMenu}
      */
diff --git a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
index a94c2f107c5..72dc37541a0 100644
--- a/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
+++ b/addons/mail/static/src/components/call_settings_menu/call_settings_menu.xml
@@ -11,7 +11,7 @@
                         <div>
                             <select name="inputDevice" class="o_CallSettingsMenu_optionDeviceSelect form-select" t-att-value="messaging.userSetting.audioInputDeviceId" t-on-change="callSettingsMenu.onChangeSelectAudioInput">
                                 <option value="">Browser default</option>
-                                <t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device" t-key="device_index">
+                                <t t-foreach="callSettingsMenu.userDevices" t-as="device" t-key="device_index">
                                     <CallSettingsMenuDevice device="device"/>
                                 </t>
                             </select>
diff --git a/addons/mail/static/src/models/call_settings_menu.js b/addons/mail/static/src/models/call_settings_menu.js
index c7ed26abf23..6844bf64b8d 100644
--- a/addons/mail/static/src/models/call_settings_menu.js
+++ b/addons/mail/static/src/models/call_settings_menu.js
@@ -4,15 +4,16 @@ import { browser } from "@web/core/browser/browser";
 
 import { registerModel } from '@mail/model/model_core';
 import { clear } from '@mail/model/model_field_command';
-import { one } from '@mail/model/model_field';
+import { attr, one } from '@mail/model/model_field';
 
 registerModel({
     name: 'CallSettingsMenu',
     identifyingMode: 'xor',
     lifecycleHooks: {
-        _created() {
+        async _created() {
             browser.addEventListener('keydown', this._onKeyDown);
             browser.addEventListener('keyup', this._onKeyUp);
+            this.update({ userDevices: await this.messaging.browser.navigator.mediaDevices.enumerateDevices() });
         },
         _willDelete() {
             browser.removeEventListener('keydown', this._onKeyDown);
@@ -130,6 +131,9 @@ registerModel({
             identifying: true,
             inverse: 'callSettingsMenu',
         }),
+        userDevices: attr({
+            default: [],
+        }),
         userSetting: one('UserSetting', {
             related: 'messaging.userSetting',
         }),