reactjs - 如何放大 react-simple-maps 中的特定地理位置？

Question

我能够显示完整的美国地图，并且可以过滤地理位置以仅显示我想要的州，但我无法弄清楚如何放大过滤后的州。

例如，我正在从https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json过滤地理位置，只显示大西洋中部的州，但视口只是隐藏了其他状态，但保持缩放，就好像所有状态都是可见的。

我传入了一个 stateList 数组，我用它来根据需要过滤地理位置。

import React from 'react';
import {geoCentroid} from 'd3-geo';
import {ComposableMap, Geographies,Geography,Marker,Annotation,ZoomableGroup} from 'react-simple-maps';
import {connect} from "react-redux";

class SimpleMap extends React.Component{
    

    componentDidUpdate = (prevProps) => {
        if(prevProps.stateList !== this.props.stateList){
            this.setState({stateList: this.props.stateList});
        }
    }

    render(){
        console.log('SimpleMap::render');
        const {geoUrl} = this.props;
        return (
                <ComposableMap projection="geoAlbersUsa">
                    <ZoomableGroup onClick={(group)=>console.log('ZoomableGroup Click',group)}>
                        <Geographies geography={geoUrl}>
                            {({ geographies, projection }) => this.renderGeographies(geographies, projection)}
                        </Geographies>
                    </ZoomableGroup>
                </ComposableMap>
        );
    }

    renderGeographies = (geographies, projection) => {
        console.log('renderGeographies',geographies,projection);
        const selectGeographies = geographies.filter(geo => this.props.stateList.includes(geo.properties.name));
        return (
            <>
                {selectGeographies.map(geo => (
                    <Geography
                        key={geo.rsmKey}
                        stroke="#FFF"
                        geography={geo}
                        fill="#DDD"
                        style={{
                            default: {
                                outline: 'none'
                            },
                            hover: {
                                outline: 'none'
                            },
                            pressed: {
                                outline: 'none'
                            }
                        }}
                    />
                ))}
            </>
        )
    }
}

SimpleMap.defaultProps = {
    stateList: [],
    geoUrl: 'https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json'
}