LayerControl is not disabling HexbinLayer

[YasminBaba]

I am attempting to use LayerControl to toggle between two different hexbin layers but have run into an issue I can't solve.
When I select a layer, it successfully appears on the map; however, when I deselect it, it does not disappear. This means if I select another layer, the previous layer remains on the map. Any help would be very appreciated, I have been stuck on this for ages!

I'm using the following package versions:
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-leaflet": "^2.1.4",
"react-leaflet-d3": "^2.0.0"

And here is my simple code:

import '../App.css';
import React, { Component } from "react";
import { Map, TileLayer, LayersControl, withLeaflet, MapControl} from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { HexbinLayer } from 'react-leaflet-d3';
import data_postive from "../data/testing_dict_positive.json";
import data_negative from "../data/testing_dict_negative.json";

const WrappedHexbinLayer = withLeaflet(HexbinLayer);
const {Overlay} = LayersControl;

class MapDeltaTransaction extends Component{
  render() {

    const options_postive = {
        colorScaleExtent: [ 1, undefined ],
        radiusScaleExtent: [ 1, undefined ],
        colorRange: [ '#b2d8b2', '#008000' ],
        radiusRange: [ 5, 12 ],
        pointerEvents: ['none'],
    };

    const options_negative = {
        colorScaleExtent: [ 1, undefined ],
        radiusScaleExtent: [ 1, undefined ],
        colorRange: [ '#ffcccc', '#FF0000' ],
        radiusRange: [ 5, 12 ],
        pointerEvents: ['none'],
    };

    return (
      <>

        <Map center={[54, -3]} zoom={5} scrollWheelZoom={false}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <LayersControl position="topleft">
                <Overlay name="Layer 1"> 
                     <WrappedHexbinLayer data={data_postive} {...options_postive} />
                </Overlay>
                <Overlay name="Layer 2"> 
                    <WrappedHexbinLayer data={data_negative} {...options_negative} />
                </Overlay>
             </LayersControl>
        </Map> 
      </>
    );
  }
}
export default MapDeltaTransaction;