diff --git a/docs/data/data-grid/custom-columns/renderers/avatar.js b/docs/data/data-grid/custom-columns/renderers/avatar.js
index b6b61f6cb4d01..a928435e763ce 100644
--- a/docs/data/data-grid/custom-columns/renderers/avatar.js
+++ b/docs/data/data-grid/custom-columns/renderers/avatar.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 
 export function renderAvatar(params) {
diff --git a/docs/data/data-grid/custom-columns/renderers/avatar.tsx b/docs/data/data-grid/custom-columns/renderers/avatar.tsx
index affcb69456ae0..e2f1f5b5b1a99 100644
--- a/docs/data/data-grid/custom-columns/renderers/avatar.tsx
+++ b/docs/data/data-grid/custom-columns/renderers/avatar.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import { GridRenderCellParams } from '@mui/x-data-grid';
 
diff --git a/docs/data/data-grid/custom-columns/renderers/sparkline.js b/docs/data/data-grid/custom-columns/renderers/sparkline.js
index 274e62a17168f..b6b083cf7b549 100644
--- a/docs/data/data-grid/custom-columns/renderers/sparkline.js
+++ b/docs/data/data-grid/custom-columns/renderers/sparkline.js
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 
 export function renderSparkline(params) {
diff --git a/docs/data/data-grid/custom-columns/renderers/sparkline.tsx b/docs/data/data-grid/custom-columns/renderers/sparkline.tsx
index a2ed4d4efcff8..c5e44fa6c8858 100644
--- a/docs/data/data-grid/custom-columns/renderers/sparkline.tsx
+++ b/docs/data/data-grid/custom-columns/renderers/sparkline.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
 import { GridRenderCellParams } from '@mui/x-data-grid';