react-simple-maps Renders map upside down

Question

I'm trying to copy what is done in this example (except making it in one file rather than 2):

https://codesandbox.io/s/map-chart-with-tooltip-xwijz?from-embed

Issue:

I'm getting everything to work, except the map renders upside down.

I've tried:

• using a projection (d3-geo.geoEqualEarth) in the hopes that the map will receive its orientation from the projection
• changing projectionConfig scale and rotation in the hopes that any of those might change how the map is rendered
• modifying topojson file found at the link and changing its "transform" property
  • (Note: I encountered a separate issue which I felt wasn't as relevant since this issue should be resolved without having to modify the original topojson file. Passing a filepath to resulted in a XHTTPRequest)
• removing non-essential components such as ZoomableGroup
• modifying the css

My Code:

Map.js

import React, { useState } from "react";
import ReactTooltip from "react-tooltip";
import {
    ZoomableGroup,
    ComposableMap,
    Geographies,
    Geography
} from "react-simple-maps";

const geoUrl = "https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-50m.json";


const MapChart = React.memo(({ setTooltipContent }) => {
    return (
        <ComposableMap>
            <ZoomableGroup>
                <a data-tip="">
                    <Geographies geography={geoUrl}>
                        {geographies => 
                            geographies.map(geo => (
                                <Geography
                                    key={geo.rsmKey}
                                    geography={geo}
                                    onMouseEnter={() => {
                                        const {
                                            NAME, POP_EST
                                        } = geo.properties;
                                        setTooltipContent(
                                            `${NAME} - ${POP_EST}`
                                        );
                                    }}
                                    onMouseLeave={() => {
                                        setTooltipContent("");
                                    }}
                                    style={{
                                        default: {
                                            fill: "#D6D6DA",
                                            outline: "none"
                                        },
                                        hover: {
                                            fill: "#F53",
                                            outline: "none"
                                        },
                                        pressed: {
                                            fill: "#E42",
                                            outline: "none"
                                        }
                                    }}
                                />
                            ))
                        }
                    </Geographies>
                </a>
            </ZoomableGroup>
        </ComposableMap>
    )
})

function Map() {
    const [content, setContent] = useState("");
    return (
        <div>
            <MapChart setTooltipContent={setContent} />
            <ReactTooltip>
                <span>{content}</span>
            </ReactTooltip>
        </div>
    )
}

export default Map;

Edit: It might be important to know that I modifying projectionConfig in ComposableMap doesn't modify the map, so changing scale doesn't scale up the map

Answer 1

Look at react-simple-maps version from example,its "1.0.0-beta.0"

"dependencies": {
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-scripts": "3.0.1",
    "react-simple-maps": "1.0.0-beta.0",//here
   "react-tooltip": "latest"
  },

by default npm install latest version,you should force npm to install betta vesion

npm install react-simple-maps@1.0.0-beta.0 

and also change

 { geographies  =>
              geographies.map(geo => (

to

 {({ geographies }) =>
              geographies.map(geo => (