Maybe someone faced a similar problem. When such a code is executed, the image added to the map is displayed not in the coordinates specified in the corners, but on the entire screen.

import "leaflet-toolbar";
import "leaflet-distortableimage";
import "leaflet-distortableimage/dist/vendor.js";
import "./styles.css";
import "leaflet/dist/leaflet.css";
import "leaflet-toolbar/dist/leaflet.toolbar.css";
import "leaflet-distortableimage/dist/leaflet.distortableimage.css";

import PlanImage from "../../../../Downloads/Stage_Plans_155_8bd04203-148f-4332-b82a-297afd3be66f.jpeg";
const map = L.map("app", {
  center: [50.0, 10.0],
  zoom: 3,
});

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

map.whenReady(() => {
  let img = new L.distortableImageOverlay(PlanImage, {
    corners: [L.latLng(51.52, -0.14), L.latLng(51.52, -0.1), L.latLng(51.5, -0.14), L.latLng(51.5, -0.1)],
    mode: "lock",
  }).addTo(map);

  // () => map.removeLayer(imageLayer);
});

An error appears

DistortableImageOverlay.js:317 Uncaught TypeError: Cannot read properties of undefined (reading 'slice')
at NewClass.getAngle (DistortableImageOverlay.js:317:18)
at NewClass._reset (DistortableImageOverlay.js:453:30)
at NewClass.setBounds (ImageOverlay.js:144:9)
at NewClass.setCorners (DistortableImageOverlay.js:247:10)
at NewClass.<anonymous> (index.js:40:7)
at NewClass.whenReady (Map.js:1465:13)
at Object.parcelRequire.src/index.js.leaflet (index.js:20:5)
at newRequire (src.a2b27638.js:47:24)
at src.a2b27638.js:81:7
at src.a2b27638.js:120:3

And after moving the mouse wheel, the image is displayed at the desired coordinates.