Map is neither centered nor fit the containing block

[Freedom-Jack]

Hello, I am facing a problem that, the map is placed on the top left corner and it doesn't fit the containing block (indicated by blue background) , also it is upside down. I tried playing with the Props of the ComposableMap but it didn't bring me anywhere. Any idea how to fix this?

\ \ The code of my component:

import ReactDOM from "react-dom";
import injectSheet from 'react-jss'
import { ComposableMap, ZoomableGroup, Geographies, Geography } from "react-simple-maps";

import my_map from "../../maps/countries.json"

const styles = theme => ({
    div1: {
        backgroundColor: "#9fd3ed"
    }
})

const composite = ({ classes }) => (
    <div className={classes.div1}>
        <ComposableMap>
                <Geographies geography={my_map}>
                    {geographies =>
                        geographies.map(geo => <Geography key={geo.rsmKey} geography={geo} />)
                    }
                </Geographies>
        </ComposableMap>
    </div>

);

export default injectSheet(styles)(composite);

[Freedom-Jack]

I fixed it by reinstalling it, seems like the build I had was buggy.