I have dependent dropdown and I'm using the get API to read and retrieve the selection option With the current code I'm not able to show the selected value for the selection

I have 2 select function one is State and another one is District. District is dependent to State. Based on the value on the state it will display list of district. With the current code the it's not selecting the current value of the district even thought the district already have value. it just that it did not showed up as selected how do I fix this code ?

This is what I have tried

    $(document).ready(function() {
      $("#state").change(function() {
        let stateID = $(this).val();
        getDist(stateID);
      });
    });

    const getDist = (state) => {
      axios.get(`${url}district?id=${state}`)
        .then(function(res) {
          if (res.data.status == 'success') {
            res.data.result.map((e) => {
              $('#dist').append(`<option value="${e.dist_id}" >${e.dist_name}</option>`);
            });
          }
        });
    }

    function getState() {
      return axios.get(`${url}state`);
    }

    Promise.all([getState(), getDetails(student)])
      .then(function(results) {
        const state = results[0];
        const student = results[1];

        if (state.data.status == 'success') {
          state.data.result.map((e) => {
            $('#state').append(`<option value="${e.st_id}">${e.st_name}</option>`);
          });
        }

        if (student.data.status == 'success') {
          let studData = student.data.result;
          $("#state").val(studData.state_id).change();
          $("#dist").val(studData.district_id).change();
        }
      });


    <div class="col-md-3">
      <div class="form-group">
        <label>State</label>
        <select class="form-control mb-3" id="state">
          <option value="" hidden>Select State</option>
        </select>
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label>District</label>
        <select class="form-control mb-3" id="dist">
          <option value="" hidden>Select District</option>
        </select>
      </div>
    </div>