Data not showing in select dropdown after value is set

the foundation of my code is that I am taking data from ag-grid and showing that data into select drop-down (inside a popup) when "Edit" button is clicked.

But the data is not showing in the select drop-down.

When I click Edit, "YES" or "NO" should show as already selected in the drop-down based on the data I get from the grid. The code I used is mentioned below:-

<!-- Alter Part -->
<div class="form-group row">
   <label for="alter_part" class="col-sm-3 col-form-label">Alter Part</label>
   <div class="col-sm-9">
      <select id="alter_part" class="form-control" onchange="alternatefunc();" required>
         <option value="1">YES</option>
         <option value="0">NO</option>
      </select>
   </div>
</div>


<!-- Test Type -->
<div class="form-group row">
   <label for="test_type" class="col-sm-3 col-form-label">Select Test Type</label>
   <div class="col-sm-9">
      <select id="test_type" class="form-control" required>
         <option value="1">YES</option>
         <option value="0">NO</option>
      </select>
   </div>
</div>


function getInitialData(params)
{
   //Setting value using grid data
   document.getElementById('alter_part').value = params.node.data[params.columnApi.getAllGridColumns()[3].colId];
      
   document.getElementById('test_type').value = params.node.data[params.columnApi.getAllGridColumns()[7].colId];

}

I have verified that the select drop-down stores the value from grid,

var a =  document.getElementById('test_type').value;

variable "a" here returns the correct value of the grid row.