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

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='&copy; <a   href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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;