Using BoxZoomControl: Uncaught TypeError: _this 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. My approach is somewhat similar to the one in issue.
What I am doing is to use BoxZoomControl 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,ZoomControl} from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { BoxZoomControl } from 'react-leaflet-box-zoom'

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

	    <ZoomControl
	    position="topright"
	    zoomInText="i"
	    zoomOutText="o"
	    />
	    
						<BoxZoomControl 
							position="topright"
							sticky={true}
							ref={(ref) => this.boxZoomControlRef = ref}
						/>

        </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-box-zoom": "^1.0.2",
    "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.7 MiB [emitted] (name: main)
asset index.html 998 bytes [emitted]
orphan modules 45.3 KiB [orphan] 25 modules
runtime modules 1.25 KiB 6 modules
modules by path ./node_modules/ 1.77 MiB 68 modules
modules by path ./src/ 6.94 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.32 KiB
    ./src/index.js 839 bytes [built] [code generated]
    ./src/main.js 840 bytes [built] [code generated]
    ./src/map.js 1.68 KiB [built] [code generated]
webpack 5.24.1 compiled successfully in 9686 ms
ℹ ｢wdm｣: Compiled successfully.

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

Uncaught TypeError: _this is undefined
    ref map.js:50
    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:55759
    <anonymous> main.bundle.js:55946

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