Map not loading when using getLegend and showing error for getView()

I was able to run my application on using Legend earlier but now I want to update my Legend when scrolling on the map. So I tried to used this code GetLegendGraphic and getLegendUrl function filter by extent . And I got the gist of how he is able to do that but when I am trying the same I keeping getting the error

var graphicUrl = wmsSource.getLegendUrl(currentResolution);

I think this is mainly due to the wmsSource not declare. But I tried to initialize seems wmsSource in TileWMS but does not seems to work.

var getExtent = function () {
    return map.getView().calculateExtent();
}
var getProjectionCode = function () {
    return map.getView().getProjection().getCode();
}

var updateLegend = function() {
    var currentResolution = map.getView().getResolution();
    var graphicUrl = wmsSource.getLegendUrl(currentResolution);
  
    const crs = `&CRS=${getProjectionCode()}`;
    const bbox = `&BBOX=${getExtent().join(',')}`;
    const height = getHeight(getExtent());
    const width = getWidth(getExtent());
    const heightAndWidth = `&srcwidth=${height}&srcheight=${width}` ;
    const legenOptions = "&legend_options=countMatched:true;fontAntiAliasing:true;hideEmptyRules:true;forceLabels:on" ;
  
    var img = document.getElementById('legend');
    img.src = `${graphicUrl}${crs}${bbox}${heightAndWidth}${legenOptions}`;
};
//Updated Legend End


//View
var myview = new ol.View({
    center : [8717490.201868,2788422.791843],
    zoom : 4
})

var firstSel = document.getElementById("City");
var secSel = document.getElementById("Sector");

//var LayerArray = [baseLayer, firstLayer]

//Map
var map = new ol.Map({
      target : 'mymap',
      view: myview,
      layers: [
        new ol.layer.Tile({
            source : new ol.source.OSM({
                attributions: 'Surveyor Allpication'
            })
        }),
        new ol.layer.Tile({
            source : new ol.source.TileWMS({
               url: 'http://localhost:8089/geoserver/India/wms',
               params: {'LAYERS': 'India:India', 'TILED': true,'TRANSPARENT':true},
               ratio: 1,
               serverType: 'geoserver',
               transition: 0,
            })
        })
      ]
})
updateLegend(); 

This here is my JS

<div class="innerMap">
    <div class="map" id="mymap"></div>
        Legend:
    <div><img id="legend"/></div>    
<!--    <div><img src="http://localhost:8089/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=India%3AIndia&RULE=Agra" />%Name</div> -->
<!--    <div><img src="http://localhost:8089/geoserver/India/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetLegendGraphic&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=India%3AIndia&SRS=EPSG%3A4326&STYLES=&SRCWIDTH=742&SRCHEIGHT=768&BBOX=75.4541015625%2C14.21630859375%2C91.7578125%2C31.09130859375&LEGEND_OPTIONS=countMatched:true;fontAntiAliasing:true;hideEmptyRules:true" /> </div>  -->
    </div>

This is my HTML.

How do I make this work?

    new ol.layer.Tile({
        source : new ol.source.TileWMS({
           url: 'http://localhost:8089/geoserver/India/wms',
           params: {'LAYERS': 'India:India', 'TILED': true,'TRANSPARENT':true},
           ratio: 1,
           serverType: 'geoserver',
           transition: 0,
        })
    })

        var wmsSource = new ol.source.TileWMS({
           url: 'http://localhost:8089/geoserver/India/wms',
           params: {'LAYERS': 'India:India', 'TILED': true,'TRANSPARENT':true},
           ratio: 1,
           serverType: 'geoserver',
           transition: 0,
        });

    new ol.layer.Tile({
        source : wmsSource
    })