Unable to dynamically update Geography component style

[telam]

Currently, the style property of the Geography component is unable to be updated dynamically in a functional component. Below is an example of what I am attempting to accomplish.

const States = (props) => {
  const { highlight, geographies, active, setActive, handleClick } = props;
  return geographies.map((geo) => {
    const geoId = geo.properties.geo_id;
    const abbr = geo.properties.iso_3166_2;
    const isActive = active?.properties?.geo_id === geoId;
    // only allow the highlighted states to be clicked on
    const cursor = isActive && highlight ? "pointer" : "default";
    return (
      <Geography
        {...{ "geo-id": geo.geo_id }}
        key={geo.rsmKey}
        stroke="#FFF"
        geography={geo}
        outline={"none"}
        fill={highlight?.indexOf(abbr) >= 0 ? "#0072c0" : "#DDD"}
        onMouseUp={(e) => {
          handleClick(geo.properties);
        }}
        onMouseEnter={(e) => {
          setActive(geo);
        }}
        onMouseLeave={(e) => {
          setActive(null);
        }}
        style={{ cursor: cursor }}
      />
    );
  });
};

[telam]

Disregard this bug. I didn't realize that you could only update the style based on the following keys in the style prop: default, hover, pressed