Using MUI ChartContainer / ResponsiveChartContainer loses point highlights and hover

Question

If I use a <LineChart> on it's own I can get hovers over points and the vertical line as I mouse left/right over the chart. However, if I decompose and use <ResponsiveChartContainer> so that I can add reference lines, I lose hover over points. The following is a simple repro component.

import React, { useState, useEffect } from 'react';
import { Container } from '@mui/material';
import { ChartsXAxis, ChartsYAxis, LinePlot, MarkPlot, ResponsiveChartContainer } from '@mui/x-charts';

const ChartNoHoverRepro: React.FC = () => {
  const [labels, setLabels] = useState<Date[]>([]);
  const [values, setValues] = useState<(number | null)[]>([]);

  useEffect(() => {
    const l: Date[] = [];
    const v: (number | null)[] = [];
    const now = Date.now();

    for (let i = 0; i < 57; i++) {
      l.push(new Date(now + i * 24 * 60 * 60 * 1000));
      v.push(i % 7 == 0 ? Math.floor(10 + Math.random() * 40) : null);
    }

    setLabels([...l]);
    setValues([...v]);
  }, []);

  return (
    <Container sx={{ height: '50vh', border: '1px solid white', paddingBottom: 0 }}>
      <ResponsiveChartContainer
        series={[{ data: values, type: 'line', connectNulls: false }]}
        xAxis={[{ data: labels, scaleType: 'time' }]}
        yAxis={[{ min: 0, max: 50 }]}
      >
        <LinePlot />
        <MarkPlot />

        <ChartsXAxis />
        <ChartsYAxis />
      </ResponsiveChartContainer>
    </Container>
  );
};

export default ChartNoHoverRepro;

Answer 1

<ResponsiveChartContainer>
  <ChartsTooltip />
</ResponsiveChartContainer>