diff --git a/docs/AppBar.md b/docs/AppBar.md
index 50d9dbafbe7..b5964385adf 100644
--- a/docs/AppBar.md
+++ b/docs/AppBar.md
@@ -238,21 +238,29 @@ The content of the user menu depends on the return value of `authProvider.getIde
 You can customize the user menu by passing a `userMenu` prop to the `<AppBar>` component.
 
 ```jsx
+import * as React from 'react';
 import { AppBar, UserMenu, useUserMenu } from 'react-admin';
 import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 
-const SettingsMenuItem = () => {
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
+const SettingsMenuItem = React.forwardRef((props, ref) => {
+    // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
     const { onClose } = useUserMenu();
     return (
-        <MenuItem onClick={onClose}>
+        <MenuItem
+            onClick={onClose}
+            ref={ref}
+            // It's important to pass the props to allow MUI to manage the keyboard navigation
+            {...props}
+        >
             <ListItemIcon>
                 <SettingsIcon fontSize="small" />
             </ListItemIcon>
             <ListItemText>Customize</ListItemText>
         </MenuItem>
     );
-};
+});
 
 const MyAppBar = () => (
     <AppBar
diff --git a/docs/Authentication.md b/docs/Authentication.md
index 82f2ad5ad3e..135456b9aa4 100644
--- a/docs/Authentication.md
+++ b/docs/Authentication.md
@@ -342,6 +342,7 @@ import { useLogout } from 'react-admin';
 import MenuItem from '@mui/material/MenuItem';
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const MyLogoutButton = forwardRef((props, ref) => {
     const logout = useLogout();
     const handleClick = () => logout();
@@ -349,6 +350,8 @@ const MyLogoutButton = forwardRef((props, ref) => {
         <MenuItem
             onClick={handleClick}
             ref={ref}
+            // It's important to pass the props to allow MUI to manage the keyboard navigation
+            {...props}
         >
             <ExitIcon /> Logout
         </MenuItem>
diff --git a/docs/ContainerLayout.md b/docs/ContainerLayout.md
index 8795e05b843..934b669f24c 100644
--- a/docs/ContainerLayout.md
+++ b/docs/ContainerLayout.md
@@ -161,16 +161,19 @@ By default, the `<ContainerLayout>` shows a user menu with a single item (logout
 
 {% raw %}
 ```jsx
+import * as React from 'react';
 import { Logout, UserMenu, useUserMenu } from 'react-admin';
 import { MenuList, MenuItem, ListItemIcon, ListItemText } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { ContainerLayout } from '@react-admin/ra-navigation';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const ConfigurationMenu = React.forwardRef((props, ref) => {
     const { onClose } = useUserMenu();
     return (
         <MenuItem
             ref={ref}
+            // It's important to pass the props to allow MUI to manage the keyboard navigation
             {...props}
             to="/configuration"
             onClick={onClose}
diff --git a/docs/Theming.md b/docs/Theming.md
index 1938444956b..e05549c60a5 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -591,7 +591,7 @@ const ConfigurationMenu = React.forwardRef((props, ref) => {
 });
 
 // It's important to pass the ref to allow MUI to manage the keyboard navigation
-const SwitchLanguage = forwardRef((props, ref) => {
+const SwitchLanguage = React.forwardRef((props, ref) => {
     const [locale, setLocale] = useLocaleState();
     // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
     const { onClose } = useUserMenu();
diff --git a/docs/useLogout.md b/docs/useLogout.md
index 481a6427309..31aca550f4c 100644
--- a/docs/useLogout.md
+++ b/docs/useLogout.md
@@ -15,6 +15,7 @@ import { AppBar, Layout, UserMenu, useLogout } from 'react-admin';
 import { MenuItem } from '@mui/material';
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
 const MyLogoutButton = forwardRef((props, ref) => {
     const logout = useLogout();
     const handleClick = () => logout();
@@ -22,6 +23,8 @@ const MyLogoutButton = forwardRef((props, ref) => {
         <MenuItem
             onClick={handleClick}
             ref={ref}
+            // It's important to pass the props to allow MUI to manage the keyboard navigation
+            {...props}
         >
             <ExitIcon /> Logout
         </MenuItem>
diff --git a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx
index ddb4d5fb63c..cf049a3fc1b 100644
--- a/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx
+++ b/packages/ra-ui-materialui/src/layout/AppBar.stories.tsx
@@ -8,6 +8,7 @@ import {
     ListItemText,
     TextField,
     Skeleton,
+    MenuItemProps,
 } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { QueryClientProvider, QueryClient } from 'react-query';
@@ -197,17 +198,26 @@ export const UserMenuCustom = () => (
     </Wrapper>
 );
 
-const SettingsMenuItem = () => {
-    const { onClose } = useUserMenu();
-    return (
-        <MenuItem onClick={onClose}>
-            <ListItemIcon>
-                <SettingsIcon fontSize="small" />
-            </ListItemIcon>
-            <ListItemText>Customize</ListItemText>
-        </MenuItem>
-    );
-};
+// It's important to pass the ref to allow MUI to manage the keyboard navigation
+const SettingsMenuItem: React.FC<MenuItemProps> = React.forwardRef(
+    (props, ref) => {
+        // We are not using MenuItemLink so we retrieve the onClose function from the UserContext
+        const { onClose } = useUserMenu();
+        return (
+            <MenuItem
+                onClick={onClose}
+                ref={ref}
+                // It's important to pass the props to allow MUI to manage the keyboard navigation
+                {...props}
+            >
+                <ListItemIcon>
+                    <SettingsIcon fontSize="small" />
+                </ListItemIcon>
+                <ListItemText>Customize</ListItemText>
+            </MenuItem>
+        );
+    }
+);
 
 export const UserMenuElements = () => (
     <Wrapper>