Cleaning up react-chartjs-2 chart points when making updates

I would like to create a chart from react-chartjs-2 that only renders the first and last points. You'll notice I have that implemented inside pointRadius. For a simple static chart that renders once this actually works fine.

The problem is I have another component that will update someDynamicData which causes the line chart to be updated and when it gets updated the previously drawn points are still visible.

Is there a way to cleanup each chart so when I dynamically update it I always get just the first and last points drawn for the current chart im looking at?

I have tried hooking up a ref and manually calling update and delete which both do not seem to work.

function getData (someData) {
  return {
    labels: someData.map(d => d.point),
    datasets: [
      {
        data: someData.map(d => d.point),
        fill: false,
        borderColor: 'white',
        tension: 0.5
      },
    ],
  };
}

function getOptions (someData) {
  return {
    elements: {
      point: {
        radius: 0,
        pointRadius: function (context) {
          if (context.dataIndex === 0 || context.dataIndex === someData.length - 1) {
            return 10;
          }
        },
      },
      tooltips: {
        enabled: false
      },
    },
    plugins: {
      legend: {
        display: false
      }
    }
  };
}


const LineChart = ({someDynamicData}) => ( <Line data={getData(someDynamicData)} options={getOptions(someDynamicData)} />);

export default LineChart;