Passing Data into a Nebula.gl HTMLClusterOverlay In Typescript React

I'm am working on adding map clustering to an existing TS based React Application. The application uses Deck.gl. The Nebula.gl HTMLClusterOverlay seems like an easy way to do this.

In the HTMLClusterOverlay example, They pass the data into the component like this:

<WorldHeritage data={data} />;

However, when attempting to do the same in my code I am met with this error.

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{ viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }>): ClusterLayer', gave the following error.
    Type '{ data: Feature[] | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ClusterLayer> & Readonly<{ viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }> & Readonly<...>'.
      Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ClusterLayer> & Readonly<{ viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }> & Readonly<...>'.
  Overload 2 of 2, '(props: { viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }, context?: any): ClusterLayer', gave the following error.
    Type '{ data: Feature[] | undefined; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<ClusterLayer> & Readonly<{ viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }> & Readonly<...>'.
      Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ClusterLayer> & Readonly<{ viewport?: Record<string, any> | undefined; zIndex?: number | undefined; children?: ReactNode; }> & Readonly<...>'.

The data I am trying to pass in is an array of geojson Objects (Feature).

Is there a way to add properties to a subclass like the one I am creating? If not, Is there a better way to pass the data in?

Here is the subclass I've created for reference.

class ClusterLayer extends HtmlClusterOverlay<Feature> {

    getAllObjects() {
        return this.props.data;
    }

    getObjectCoordinates(object: Feature) {
        const lat: number = object.geometry.coordinates[0];
        const long: number = object.geometry.coordinates[1];
        return [lat, long] as [number, number];
    }

    renderObject(coordinates: [number, number], object: Feature) {
        if (this.getZoom() > 5) {
            return (
                <HtmlOverlayItem
                    style={{
                        background: 'red',
                        padding: 4,
                        color: 'white',
                        fontSize: 12,
                        lineHeight: '10px',
                        maxWidth: 300
                    }}
                    key={object.properties.name}
                    coordinates={coordinates}
                >
                    {Object}
                </HtmlOverlayItem>
            );
        }

        return (
            <HtmlOverlayItem
                style={{ background: 'red', padding: 4 }}
                key={object.properties.name}
                coordinates={coordinates}
            >

            </HtmlOverlayItem>
        );
    }

    renderCluster(coordinates: [number, number], clusterId: React.Key | undefined, pointCount: any) {
        return (
            <HtmlOverlayItem
                style={{
                    background: 'blue',
                    padding: 4,
                    color: 'white',
                    width: 40,
                    height: 40,
                    borderRadius: 20,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
                key={clusterId}
                coordinates={coordinates}
            >
                {pointCount}
            </HtmlOverlayItem>
        );
    }
}