Tableau viz.dispose() Not working - Another viz is already present in element

Question

I am using tableau javascript api to embed tableau dashboards in my webpage. I am trying to dynamically load dashboards in a div according to the user's choice. I am referring official tableau documentaion for the purpose. But while after loading a viz, when I am trying to load another viz in that same div, I am getting a error like this.

Another viz is already present in element

I found a solution in tableau community itself.

https://community.tableau.com/s/question/0D54T00000C5ja9/another-viz-is-already-present-in-element-divtableauviz-error

But I cant use this dispose method. It is not working for me.

initDash() {
var viz, containerDiv, url, options;
containerDiv = document.getElementById("vizContainer");
url = "https://SampleURL";
options = {
  hideTabs: true,
  height: '100vh',
  width: '100vw',
  onFirstInteractive: function () {
    console.log("Run this code when the viz has finished loading.");
  },
  onFirstVizSizeKnown: function () {
    console.log("Viz Size Loaded");
  }
};

loadViz(containerDiv, url, options);

function loadViz(containerDiv, url, options) {
  if(viz){
      viz.dispose();
         }
  viz = new tableau.Viz(containerDiv, url, options);
}

}

Any Help would be thankful.