I want to make an "Add Area" function. After clicking on the map the popup for entering the Area name will be showing and after confirming the name, the map should be automatically zooming to the area with padding {100,100,100,100} and the image marker will be showing. But my image marker(.png and .svg) is not showing, then it zooms too deep. It seems my padding didn't work well.

AddArea.js

import 'ol/ol.css';
import Draw from 'ol/interaction/Draw';
import Map from 'ol/Map';
import View from 'ol/View';
import {toLonLat} from 'ol/proj';
import {toStringXY} from 'ol/coordinate';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {fromLonLat} from 'ol/proj';
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

const map=$('#map').data('map');

const vectorSource = new VectorSource();
const vector = new VectorLayer({
  source: vectorSource,
  style: new Style({
     image: new Icon({
         anchor: [0.5, 1],
         anchorXUnits: "fraction",
         anchorYUnits: "fraction",
         src: "pin.png"
     })
 })
});

var vectorLayer = new VectorLayer({
  source: new VectorSource(),
});
map.addLayer(vectorLayer);

let draw;
function addInteraction() {
    map.addLayer(vector);
    draw = new Draw({
    source: vectorSource,
    type: "Point",
  });
map.addInteraction(draw);
}


$('#add-area-btn').click(function(){
   addInteraction();

map.on('singleclick', function (evt) {

Swal.fire({
  position: 'top',
  title: 'Input area name',
  input: 'text',
  inputPlaceholder: 'Enter area name',
  showCancelButton: true,
  allowOutsideClick: false,
  inputValidator: (value) => {
     
    if (!value) {
      return 'You need to write something!'
    }
    else {

      map.getView().fit(vectorSource.getExtent(),  
      {
        size: map.getSize,
        padding:[100,100,100,100]
      });
      vector.getSource().clear(true);
      map.removeLayer(vector);
      map.getInteractions().pop();

      //Enable click function
      map.un('click', callback);
    }
  }
}).then((result) => {
  //Cancel button clicked
  
  if (result.dismiss == Swal.DismissReason.cancel) {
    Swal.fire({
      position: 'top',
      icon: 'info',
      title: 'Area Canceled'
    });
    vector.getSource().clear(true);
    map.removeLayer(vector);
    map.getInteractions().pop();

    //Enable click function
    map.un('click', callback);
   }
  })
 });
})

That's my code and hope someone can help me... Thank you...