Chart.js fill has poor rendering

Question

Does anyone know how to stop chart js occasionally filling a chart like this:

It looks like there's rips or holes in the background area of the chart. It doesn't always happen. Everything on the chart works as expected but the background just looks like some sort of low quality render.

I'm using NextJS with:

"chart.js": "^4.3.0",
"react-chartjs-2": "^5.2.0",

Here's a snippet to show how i'm importing and registering elements (some code removed for clarity):

import { Chart } from 'react-chartjs-2'
import {
  Chart as ChartJS,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Title,
  CategoryScale,
  Filler,
  Legend
} from 'chart.js'

ChartJS.register(LineController, LineElement, PointElement, LinearScale, Title, Legend)
ChartJS.register(CategoryScale)
ChartJS.register(Filler)`


const options = {
  maintainAspectRatio: false,
  responsive: true,
  plugins: {
    legend: {
      position: 'top'
    }
  }
}

let datasets = [
  {
    id: 1,
    label: showLegend ? 'Portfolio' : '',
    data: some_data_array,
    borderColor: ['rgba(110, 127, 255, 1.0)'],
    backgroundColor: ['rgba(110, 127, 255, 0.3)'],
    fill: 'origin',
    tension: 0.2,
    spanGaps: true
  }
]
<Chart
  className='performanceChart'
  height='100%'
  options={options}
  type='line'
  data={{
    labels: labels,
    datasets: datasets
  }}
/>