Using CoordinatesControl: Uncaught TypeError: pos is undefined

[dancesWithCycles]

Hi folks,
Thank you very much for maintaining this repository. I am facing an issue I do not know how to handle without deep knowledge of the react-leaflet-coordinates library. What I am doing is to use CoordinatesControl just like in the example in this repository. Here is my main.js file.

import React from 'react';  
import MyMap from './map';
import './main.css';

const Main=()=>
{
    return <MyMap/>; 
}
export default Main;

Here is my map.js file:

import React from 'react';  
// map is invisible without the following CSS
import './map.css';
import  {Map,TileLayer} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { CoordinatesControl } from 'react-leaflet-coordinates';

const MyMap=()=>
{
    return(
        <Map
        className="map"
        // map is invisible without center attribute
        center={[0,0]}
        // map is invisible without zoom attribute
        zoom={2}>
                
            <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            />
        
 	    <CoordinatesControl />
	    
        </Map>
        ); 
}
export default MyMap;

Here is my package.json file:

{
  "name": "grassroot-react-leaflet",
  "version": "0.0.1",
  "description": "grassroot react-leaflet app for map development",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Stefan Begerad",
  "license": "GPL-3.0",
  "dependencies": {
    "@babel/core": "*",
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "babel-loader": "*",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "*",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-leaflet": "^2.8.0",
    "react-leaflet-coordinates": "^1.0.1",
    "webpack": "*"
  },
  "devDependencies": {
    "css-loader": "^5.0.2",
    "file-loader": "^6.2.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack-cli": "*",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

The map is bundled successfully as you can see here:

$ npm start

> grassroot-react-leaflet@0.0.1 start
> webpack serve --open --config webpack.dev.js

ℹ ｢wds｣: Project is running at http://localhost:55555/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/user/GitHub/dancesWithCycles/grassroot-react-leaflet/dist
ℹ ｢wdm｣: wait until bundle finished: /
ℹ ｢wdm｣: asset main.bundle.js 4.69 MiB [emitted] (name: main)
asset index.html 998 bytes [emitted]
orphan modules 45.9 KiB [orphan] 26 modules
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 1.77 MiB 67 modules
modules by path ./src/ 6.69 KiB
  modules by path ./src/*.css 3.62 KiB
    ./src/main.css 325 bytes [built] [code generated]
    ./src/map.css 324 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/main.css 665 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/map.css 2.33 KiB [built] [code generated]
  modules by path ./src/*.js 3.07 KiB
    ./src/index.js 839 bytes [built] [code generated]
    ./src/main.js 840 bytes [built] [code generated]
    ./src/map.js 1.43 KiB [built] [code generated]
webpack 5.24.1 compiled successfully in 8847 ms
ℹ ｢wdm｣: Compiled successfully.

Anyhow, the map is not visualized and I receive the following errors in the browser console:

Uncaught TypeError: pos is undefined
    addTo leaflet-src.js:4763
    componentDidMount MapControl.js:36
    React 6
    unstable_runWithPriority scheduler.development.js:653
    React 5
    unstable_runWithPriority scheduler.development.js:653
    React 6
    <anonymous> index.js:22
    <anonymous> main.bundle.js:55620
    <anonymous> main.bundle.js:55807
leaflet-src.js:4763
The above error occurred in the <CoordinatesControl> component:
    in CoordinatesControl (created by Context.Consumer)
    in ForwardRef(Leaflet(CoordinatesControl)) (created by MyMap)
    in div (created by Map)
    in Map (created by MyMap)
    in MyMap (created by Main)
    in Main

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

If you have any idea what is going on here I would be very happy if you point me in the right direction to get over this issue.

Cheers,
Stefan