Zoom-Scrolling not Working in Pigeon-Maps ReactJS - reactjs

Question

I have a problem with pigeon-maps in my reactjs-app. Using the mouse to navigate through the map works fine, but zooming with the scroll wheel does not work. However, a double-click zooms in the map, but then i have no way of zooming out again.
zoom and center are controlled variables.
<Map
limitBounds='edge'
center={center}
onBoundsChanged={res => {setCenter(res.center); setZoom(res.zoom)}}
zoom={zoom}
provider={provider}
onClick={changeLocation}
width={width}
height={height}
zoomOnMouseWheel={true}
animate={true}>
{renderMarkers()}
</Map>
Once rendered the component looks like this:
These are the dependencies i am using:
"dependencies": {
"#types/jest": "^25.1.4",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"classnames": "^2.2.6",
"pigeon-maps": "^0.14.0",
"pigeon-overlay": "^0.2.3",
"react": "^16.11.0",
"react-cookie": "^4.0.3",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.1",
"react-spring": "^8.0.27",
"react-use-clipboard": "1.0.2",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.5",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"typescript": "^3.8.3"
}
If any of you have an Idea what might be causing my problem, i would be thankful if you shared it with me.
Best regards,
Koenigstein
edit: the whole code :
import React, {useEffect, useState} from 'react'
import Map from "pigeon-maps";
import "./editor.css";
export default function EditorInterface(props) {
const [selectedLocation, setSelectedLocation] = useState([0,0]);
const defaultWidth = window.innerWidth * 0.6;
const defaultHeight = window.innerHeight * .50 - 24;
const [zoom, setZoom] = useState(13);
const [width, setWidth] = useState(defaultWidth);
const [height, setHeight] = useState(defaultHeight);
const [center, setCenter] = useState([49.750049, 6.637275]);
const provider = (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3);
return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
};
const changeLocation = (e) =>{
setSelectedLocation(e.latLng);
};
return (
<div className="wrapper">
<div>
<Map
limitBounds='edge'
center={center}
onBoundsChanged={res => {setCenter(res.center); setZoom(res.zoom)}}
zoom={zoom}
provider={provider}
onClick={changeLocation}
width={width}
height={height}
zoomOnMouseWheel={true}
animate={true}>
</Map>
</div>
</div>
);
};
The component is being used here:
import React from 'react';
import {
BrowserRouter as Router,
Route} from "react-router-dom";
import AdminInterface from "./components/admininterface/AdminInterface";
import Watermark from "./components/watermark/Watermark";
import UserInterface from "./components/userinterface/UserInterface";
import EditorInterface from "./components/editorinterface/EditorInterface"
const App = () => {
return (
<Router>
<Route exact path={"/"} render={() =>
<UserInterface/>
}/>
<Route path={"/admin"} render={() =>
<AdminInterface/>
}/>
<Route path={"/scenarioCreator"} render={() =>
<EditorInterface/>
}/>
<Watermark/>
</Router>
);
};
export default App;

Answer 1

I will close this for now, because as DILEEP THOMAS pointed out, there is nothing wrong with the code, there seems to be something wrong with my project configuration or something else.
I will try to figure it out myself first.

Answer 2

According to pigeon-maps docs, you need to press (cmd/win) key while zooming with the mouse wheel
metaWheelZoom - Zooming with the mouse wheel only works when you hold down the meta (cmd/win) key. Defaults to false.
Docs here : https://github.com/mariusandra/pigeon-maps