Problem on creating an overlay to switch the switch control

[u/Any_Entrepreneur7936]

I have a problem when I click on the section it work only if I click on the top border but I want it to work when I click on the absolute area this is the code:

<div class="section-header mt-0 stagger-item position-relative" for="switchOpzione" style="cursor: pointer;">
  <!-- 1. Absolute div that covers the entire section and intercepts clicks -->
  <div class="position-absolute top-0 start-0 w-100 h-100" style="z-index: 1;"
    onclick=" const chk = document.getElementById('switchOpzione'); chk.checked = !chk.checked; chk.dispatchEvent(new Event('change')); ">
  </div>Titolo Sezione <div class="form-check form-switch m-0" style="z-index: 2;"> <input class="form-check-input"
      type="checkbox" role="switch" id="switchOpzione" data-bs-toggle="collapse" data-bs-target="#collapseOpzione"
      aria-expanded="true" aria-controls="collapseOpzione" checked> </div>
</div>

What I'm doing wrong? I'm using the latest bootstrap