[charts] Fix grid with band scale

Author: alexfauquette

packages/x-charts/src/ChartsGrid/ChartsGrid.test.tsx

@@ -31,4 +31,18 @@ describe('<ChartsGrid />', () => {
       </ChartContainer>,
     );
   });
+
+  it('should render grid on band scale without error', () => {
+    render(
+      <ChartContainer
+        series={[]}
+        width={500}
+        height={500}
+        xAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
+        yAxis={[{ scaleType: 'band', data: ['A', 'B', 'C'] }]}
+      >
+        <ChartsGrid vertical horizontal />
+      </ChartContainer>,
+    );
+  });
 });

packages/x-charts/src/ChartsGrid/ChartsHorizontalGrid.tsx

@@ -25,7 +25,7 @@ export function ChartsGridHorizontal(props: ChartsGridHorizontalProps) {
     <React.Fragment>
       {yTicks.map(({ value, offset }) => (
         <GridLine
-          key={`horizontal-${value.getTime?.() ?? value}`}
+          key={`horizontal-${value?.getTime?.() ?? value}`}
           y1={offset}
           y2={offset}
           x1={start}

packages/x-charts/src/ChartsGrid/ChartsVerticalGrid.tsx

@@ -25,7 +25,7 @@ export function ChartsGridVertical(props: ChartsGridVerticalProps) {
     <React.Fragment>
       {xTicks.map(({ value, offset }) => (
         <GridLine
-          key={`vertical-${value.getTime?.() ?? value}`}
+          key={`vertical-${value?.getTime?.() ?? value}`}
           y1={start}
           y2={end}
           x1={offset}