diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
index 3418d179a1c7..e4e4dc37789d 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.js
@@ -19,6 +19,8 @@ import InputBase from '@mui/material/InputBase';
 import { enUS as locale } from 'date-fns/locale';
 import { styled } from '@mui/material/styles';
 
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+
 const dateAdapter = new AdapterDateFns({ locale });
 
 /**
@@ -54,21 +56,29 @@ function WrappedGridEditDateInput(props) {
   return <GridEditDateInput fullWidth {...InputProps} {...other} />;
 }
 
-function GridEditDateCell({ id, field, value, colDef }) {
+function GridEditDateCell({ id, field, value, colDef, hasFocus }) {
   const apiRef = useGridApiContext();
-
+  const inputRef = React.useRef();
   const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
 
   const handleChange = (newValue) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+
   return (
     <Component
       value={value}
       autoFocus
+      enableAccessibleFieldDOMStructure={false}
       onChange={handleChange}
       slots={{ textField: WrappedGridEditDateInput }}
+      slotProps={{ textField: { inputRef } }}
     />
   );
 }
diff --git a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
index a381b48b922b..5e081da33dfb 100644
--- a/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
+++ b/docs/data/data-grid/custom-columns/EditingWithDatePickers.tsx
@@ -24,6 +24,7 @@ import InputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { enUS as locale } from 'date-fns/locale';
 import { styled } from '@mui/material/styles';
 import { TextFieldProps } from '@mui/material/TextField';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 
 const dateAdapter = new AdapterDateFns({ locale });
 
@@ -67,21 +68,30 @@ function GridEditDateCell({
   field,
   value,
   colDef,
+  hasFocus,
 }: GridRenderEditCellParams<any, Date | null, string>) {
   const apiRef = useGridApiContext();
-
+  const inputRef = React.useRef<HTMLInputElement>();
   const Component = colDef.type === 'dateTime' ? DateTimePicker : DatePicker;
 
   const handleChange = (newValue: unknown) => {
     apiRef.current.setEditCellValue({ id, field, value: newValue });
   };
 
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current!.focus();
+    }
+  }, [hasFocus]);
+
   return (
     <Component
       value={value}
       autoFocus
+      enableAccessibleFieldDOMStructure={false}
       onChange={handleChange}
       slots={{ textField: WrappedGridEditDateInput }}
+      slotProps={{ textField: { inputRef } }}
     />
   );
 }