'fill' option of 'line' chart in chart.js is not working

Question

I use react-chartjs-2 to create a line chart with 4 datasets.

Currently the chart looks like this:

I want to fill the area between the 2 red lines (SMOOTH DATA MIN & SMOOT DATA MAX). I tried several different approach based on the doc but all failed.

Currently my code looks like that:

    ...
    ChartJS.register(
      CategoryScale,
      LinearScale,
      PointElement,
      BarElement,
      LineElement,
      Title,
      Tooltip,
      Legend,
      TimeScale
  );

  let graphData = {
    datasets: [
      {
        label: `REAL DATA`,
        data: realData.data?.map((d) => ({x: d.timestamp, y: d.value})),
        showLine: false,
      },
      {
        label: `SMOOTH DATA`,
        data: smoothData.data?.map((d) => ({x: d.timestamp, y: d.value})),
        borderColor: "#4233c9",
        pointStyle: false
      },
      {
        label: `SMOOTH DATA MIN`,
        data: smoothData.data?.map((d) => ({x: d.timestamp, y: d.min})),
        borderColor: '#f50320',
        pointStyle: false,
        backgroundColor: '#FFC04EFF',
        fill: 3
      },
      {
        label: `SMOOTH DATA MAX`,
        data: smoothData.data?.map((d) => ({x: d.timestamp, y: d.max})),
        borderColor: '#ef0505',
        pointStyle: false
      }
    ],
  };

  let plugins = [];

  var options = {
    maintainAspectRatio: false,
    scales: {
      x: {type: "time"},
    }
  };

  return (
      <div>
        <Line data={graphData} height={600} plugins={plugins}
              options={options}/>
      </div>
  );