ReactLeaflet with open street map- unable to fit in marker point exactly inside the image overlay - image

Question

I am trying to fit an imageoverlay inside a map container with few marker points to be aligned accordingly.
outer/div container size is fixed height: "264px" width: "1179px",imageoverlay here is an image of airport bay with list of latitudes and longitude points for each bay locations,
I have 4 point coordinates of entire bay area which is to be covered, Problem is if I try to fit the image inside the 4 points image looks distorted, all the markers appears close to each other, and also it is not aligned with image overlay. I tried to rotate the image even then it didnt work.(2nd image for ref)
If I fit the image overlay based on the width/height image fits well, but markers are all scattered ,
Help is much appreciated , kindly excuse if the above explanation quite long.(1st image for ref)
unaligned markers
proper_markers_OSM_but_not_correctly_as_in_image
import * as React from "react";
import {useMemo,render,useState,useEffect } from "react";
import { LatLng, LatLngBounds,CRS,Transformation } from "leaflet";
import { MapContainer, TileLayer, ImageOverlay ,Marker, Popup,useMap,Rectangle, ZoomControl} from "react-leaflet";
import {data} from "./data/mockdata"
import aiportviewmap from './data/aiportviewmap.png'
const Bound = () => {
const outerBounds = [
  [1.3395283985838653, 103.97021804850274],
  [1.3875520864854187, 103.99121729409903],
  [1.3316406520024404, 103.98991242756328],
  [1.3820307764687148, 104.00684534524635],
] 
  function SetBoundsRectangles() {
  const [bounds, setBounds] = useState(outerBounds)
let calcbound=[];
data.map((row) =>{
calcbound.push([row.northLat,row.eastLong])
})
const bayBound=calcbound
const map = useMap()  
useEffect(()=>{
map.setView( [map.getCenter().lat, map.getCenter().lng],15)
// // map.invalidateSize();
// // setBounds(outerBounds)
// map.fitBounds(outerBounds)
},[])
return (
   <>
<ImageOverlay
// url={"https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"}
style={{ transform:'rotate(180deg)' }}
url={aiportviewmap}
bounds={ outerBounds}
// eventHandlers={innerHandlers}
opacity={0.8}
zIndex={10}
scale={1}
style={{transform:"rotate(90deg)" }}
whenReady={(e) => e.target.fitBounds(bayBound)}
/>
     </>
  )
} 
return(
  <MapContainer
center ={[1.3595963692439295,103.98853169687455]}
zoom={0}
// style={{ transform:"rotate(90deg)" }}
scrollWheelZoom={false}
crs={CRS.Simple}>
  <TileLayer
      attribution='© OpenStreetMap contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    <SetBoundsRectangles />
{data.map((row) => {
console.log("row",row);
return (
<Marker
key={row.bayLocationCode}
position={[row.northLat, row.eastLong]}>
<Popup>
{row.bayLocationCode}
</Popup>
</Marker>);
})
}
  </MapContainer>
)
}
export default Bound;