The space at around of map issue

[sunshinelancer828]

Hi, there. how are you today.

import React, {useCallback, useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {
ZoomableMap,
Geographies,
Geography,
Marker,
Markers,
} from 'react-native-simple-maps';
import {Path} from 'react-native-svg';
const geoFile = require('./json/world-50m.json');

const MAP_WIDTH = 500;
const MAP_HEIGHT = 280;

const PortMapCard = ({portsData, selectedPort, setSelectedPort}) => {
const [markers, setMarkers] = useState([]);

const projectionConfig = {
yOffset: 50,
precision: 0.01,
scale: 100,
rotation: [0, 0, 0],
};

const handleClick = useCallback(marker => {
setSelectedPort({id: marker.portID, name: marker.portName});
}, []);

const renderGeographies = (geographies, projection) => {
const style = {
fill: '#95d5f2',
stroke: '#fff',
strokeWidth: 0.3,
fillRule: 'evenodd',
};
return geographies.map((geography, index) => (
<Geography
key={index}
geography={geography}
projection={projection}
style={{
default: style,
pressed: style,
}}
/>
));
};

const renderMarker = (marker, i) => {
return (
<Marker
key={i}
marker={marker}
style={{
default: {
opacity: selectedPort?.id === marker.portID ? 1 : 0.6,
},
pressed: {
opacity: 0.8,
},
}}
onLongPress={() => handleClick(marker)}>


);
};

useEffect(() => {
const markersData = portsData.reduce((markerData, port) => {
return [
...markerData,
{
coordinates: [port.lon, port.lat],
portName: port.name,
portID: port.id,
},
];
}, []);
setMarkers(markersData);
}, [portsData]);

return (

<ZoomableMap
initialZoom={1}
width={MAP_WIDTH}
height={MAP_HEIGHT}
projectionConfig={projectionConfig}
canvasStyle={{backgroundColor: 'transparent'}}
viewStyle={{backgroundColor: 'transparent'}}>

{(geographies, projection) =>
renderGeographies(geographies, projection)
}

{markers.map(renderMarker)}


);
};

const styles = StyleSheet.create({
container: {
width: '100%',
height: 300,
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
overflow: 'hidden',
zIndex: -100,
backgroundColor: '#bbefff2e',
},
});

export default PortMapCard;

I developed simple map by using this modul.
all are great.
but I am not sure, why there is some space around of map.

when I push this map, it can move any where.
but I don't want it. it should be not moved.