Select2 : Reset selection/value displayed in dropdown on event (when other dropdown option is selected)

Question

I'm trying to reset the selection/value displayed in a dropdown on an event (i.e. when other dropdown option is selected).

For instance, if an option was selected in the first dropdown id="reg", it should reset back the the placeholder when an option is selected in the second dropdown id="rmr".

I've tried two solutions but neither seems to work.

$(document).ready(function() {
  reg = [{
      "id": 11,
      "res_nm_reg": "Abitibi-Témiscamingue"
    },
    {
      "id": 12,
      "res_nm_reg": "Outaouais"
    },
    {
      "id": 13,
      "res_nm_reg": "Laurentides"
    },
    {
      "id": 14,
      "res_nm_reg": "Lanaudière"
    }
  ]

  metro = [{
      "id": 1,
      "rmrnom": "Trois-Rivières"
    },
    {
      "id": 2,
      "rmrnom": "Shawinigan"
    },
    {
      "id": 3,
      "rmrnom": "Drummondville"
    },
    {
      "id": 4,
      "rmrnom": "Granby"
    },
    {
      "id": 5,
      "rmrnom": "Sorel-Tracy"
    }
  ]

  reg = reg.map(({
    res_nm_reg: text,
    ...rest
  }) => ({
    text,
    ...rest
  }));
  $("#reg").select2({
    placeholder: "Please select a region",
    data: reg
  });
  $('#reg').on('select2:selecting', function(e) {
    console.log(e.params.args.data['text']);
    $('#rmr').val(null).trigger("change");
    $('#rmr').select2('data', null);
  });
  
  metro = metro.map(({
    rmrnom: text,
    ...rest
  }) => ({
    text,
    ...rest
  }));
  $("#rmr").select2({
    placeholder: "Please select a region",
    data: reg
  });
  $('#rmr').on('select2:selecting', function(e) {
    console.log(e.params.args.data['text']);
    $('#reg').val(null).trigger("change"); //option 1
    $('#reg').select2('data', null); //option 2
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>

<div class="div-selectors">
  <h5>Région</h5>
  <form action="" method="POST" enctype="multipart/form-data">
    <input onclick="handleData(this.id, this.value)" name="reg" id="reg" class="selectors" type="hidden" style="width:150px" />
  </form>
</div>
<div class="div-selectors">
  <h5>Région métropolitaine de recensement</h5>
  <form action="" method="POST" enctype="multipart/form-data">
    <input onclick="handleData(this.id, this.value)" name="rmr" id="rmr" class="selectors" type="hidden" style="width:150px" />
  </form>
</div>