Uncheck a check box when a specific check box is unchecked

I have 2 checkboxes on my form extraOption2 and extraOption3 I successfully managed to make extraOption2 auto checked when the user check extraOption3 but I am not still able to make extraOption3 got unchecked when the user unchecks extraOption3

The HTML code that I am using:

var checkboxesToCheck1 = [
  // TODO: Add here the HTML IDs of checkboxes to check -->
  'extraOption2',
  'extraOption3',
];

var vifield = document.getElementById('extraOption3');

vifield.onclick = function() {
  checkboxesToCheck1.forEach(
    function(id, index) {
      document.getElementById(id).checked = vifield.checked;
    }
  );
}

<div>
  <div class="col-12 col-sm-6 col-lg-4">
    <input type="hidden" name="extraOption2Title" value="Extra Option 2" />
    <input type="checkbox" id="extraOption2" class="inp-cbx" name="extraOption2" value="5.00" />
    <label class="cbx" for="extraOption2">
<span>
<svg width="12px" height="10px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<span id="extraOption2Title">Invoicing $5/m</span>
</label>
  </div>

  <div class="col-12 col-sm-6 col-lg-4">
    <input type="hidden" name="extraOption3Title" value="Extra Option 3" />
    <input type="checkbox" id="extraOption3" class="inp-cbx" name="extraOption3" value="5.00" />
    <label class="cbx" for="extraOption3">
<span>
<svg width="12px" height="10px" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<span title="Requires: Invoicing" id="extraOption3Title">Sales $5/m </span>
</label>
  </div>
</div>

I can use that code to make extraOption3 auto-checked / unchecked when extraOption2 is checked / unchecked but I want some code to allow the user to auto-check extraOption3 when extraOption2 is unchecked to allow the user to choose extraOption2 without the need to get extraOption3 but not the opposite.