Embedding ComposableMap and ZoomableGroup within a div gives error on mouse scroll - Cannot read property 'deltaY' of null

I have installed RSM (v2.1.2) and set-up the project as mentioned in the documentation.

Issue is that whenever I try to zoom into the map using touch-pad or mouse wheel scroll, I get the error - Cannot read property 'deltaY' of null (zoom.js:37). Somehow the zoom function is not receiving event and thus the error. I am not sure as to why the event is null.

Similarly, whenever I try to click on the map I get the error - Cannot read property 'view' of null (zoom.js:239)

I tried many possible solutions but I am not sure where I am going wrong. Below is my implementation of RSM which I am calling in other component wrapped inside div.

RSM version - 2.1.2

           <div>
                <ComposableMap
                    width={mapWidth}
                    height={mapHeight}
                    projection={projection}
                    projectionConfig={{ scale: scale }}
                >
                    <ZoomableGroup
                        zoom={1}
                    >
                        <Geographies geography={geoUrl}>
                            {({ geographies }) =>
                                geographies.map(geo => {
                                    // console.log('geo: ',geo)
                                    return (
                                    <Geography
                                        key={geo.rsmKey}
                                        geography={geo}
                                        onMouseEnter={() => {
                                            const { NAME } = geo.properties;
                                            console.log('Country: ', NAME)
                                        }}
                                        stroke="#23232f"
                                        style={{
                                            default: {
                                                fill: "#747480",
                                                outline: "none"
                                            },
                                            hover: {
                                                fill: "#FE9A90",
                                                outline: "none"
                                            },
                                            pressed: {
                                                fill: "#E42",
                                                outline: "none"
                                            }
                                        }}
                                    />
                                )})
                            }
                        </Geographies>
                    </ZoomableGroup>
                </ComposableMap>
            </div>

It would be helpful if anyone can help with this.

zcreativelabs / react-simple-maps

Embedding ComposableMap and ZoomableGroup within a div gives error on mouse scroll - Cannot read property 'deltaY' of null #214