bootstrap 4 checkbox inside list-group-item as collapse not functioning

I have created a bootstrap 4 list-group-item together with the collapse function.

My issue, is that the list-group-item interferes with a checkbox within it, such that the checkbox itself when clicked activates the collapse function as well, but also does not respond to being selected/unselected.

If a checkbox/radio is in the list-group-item, how can I make the checkbox work independently within the list-group-item, if the list-group-item is a collapsible button?

I need it to work like it does, but it there someway I can make the checkbox work without it triggering the collapse?

please review code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>



<div class="container">
  <div class="row">
    <div class="col">
      <div class="list-group mt-5">
        <a href="#" class="list-group-item list-group-item-action" data-toggle="collapse" data-target="#sample1" aria-expanded="false" aria-controls="sample1">
        <div class="custom-control custom-checkbox float-left">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1"></label>
</div>
    Cras justo odio
  </a>
  <div class="collapse mb-2" id="sample1">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
        <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
        <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
      </div>
    </div>
  </div>
</div>