React-leaflet doesn't clear routes when adding additional waypoints

Question

I'm trying to clear the route when I add a new waypoint. Only two waypoints should should show. However, when adding an additional waypoint, Leaflet will show the old route instead of clearing it. I checked the console logs and it definitely only shows two waypoints, and the first one is "spliced" out and replace with a new waypoint. Any ideas on how to reset the map?

import { useEffect, useRef } from 'react';
import Leaflet from 'leaflet';
import * as ReactLeaflet from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import "leaflet-routing-machine"
import { useMapStore } from '@/store/mapStore'

const { MapContainer, FeatureGroup, GeoJSON, useMap } = ReactLeaflet;

function MyComponent() {
  const map = useMap()
  const lat = useMapStore(state => state.lat)
  const lng = useMapStore(state => state.lng)

  // https://www.npmjs.com/package/leaflet-routing-machine/v/0.2.0

  useEffect(() => {
    Leaflet.Icon.Default.mergeOptions({
      iconRetinaUrl: 'images/marker-icon-2x.png',
      iconUrl: 'images/marker-icon.png',
      shadowUrl: 'images/marker-shadow.png'
    });

    let routeControl = Leaflet.Routing.control({
      waypoints: [
        Leaflet.latLng(-35.3080, 149.1250),
        Leaflet.latLng(-35.3080, 149.1250)
      ],
      router: Leaflet.Routing.mapbox(process.env.NEXT_PUBLIC_MAPBOX_KEY)
      // your other options go here
    }).addTo(map);

    if (lat) {
      routeControl.spliceWaypoints(0, 1, Leaflet.latLng(-35.3080, 149.1250))

      const latlng = Leaflet.latLng(lat, lng)

      routeControl.spliceWaypoints(0, 1, latlng)
      routeControl.route()
    }

    routeControl.getWaypoints().forEach((waypoint, index) => {
      console.log(waypoint)
    })

  }, [map, lat, lng])
  return null
}

const Map = ({ children, className, width, height, ...rest }) => {
  return (
    <MapContainer
      {...rest}>
      <MyComponent />
      {children(ReactLeaflet, Leaflet)}
    </MapContainer>
  )
}

export default Map;

Screenshots below: Adding the first route

Adding a new second waypoint leaves the old route in the map

Checked the API docs here: https://www.liedman.net/leaflet-routing-machine/api/