diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
index 247e1b0344ab0..358173bcb0154 100644
--- a/packages/x-charts/src/BarChart/BarElement.tsx
+++ b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -6,7 +6,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { animated } from '@react-spring/web';
+import { AnimatedProps, animated } from '@react-spring/web';
 import {
   getIsFaded,
   getIsHighlighted,
@@ -60,11 +60,20 @@ export const BarElementPath = styled(animated.rect, {
     : ownerState.color,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: (ownerState.isFaded && 0.3) || 1,
-}));
-
-interface BarProps extends Omit<React.ComponentPropsWithoutRef<'path'>, 'id' | 'color'> {
+})) as React.ElementType<BarProps>;
+
+interface BarProps
+  extends Omit<
+      React.SVGProps<SVGRectElement>,
+      'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'
+    >,
+    AnimatedProps<{
+      x?: string | number | undefined;
+      y?: string | number | undefined;
+      height?: string | number | undefined;
+      width?: string | number | undefined;
+    }> {
   highlightScope?: Partial<HighlightScope>;
-  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
   ownerState: BarElementOwnerState;
 }
 
@@ -73,7 +82,7 @@ export interface BarElementSlots {
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.JSXElementConstructor<BarProps>;
+  bar?: React.ElementType<BarProps>;
 }
 
 export interface BarElementSlotProps {