How can I select a "checkbox" which is a div with Codeception?

So I have to click in a checkbox, but it is a css div actually. The real input is not displayed, or it is hidden somewhere.

This is the unchecked one:

<div class="list-item-cell checkbox-list-item">
                <div class="checkbox audience-checkbox-individual">
            <div class="checkbox-in">
                <input type="checkbox" name="audience-checkbox-923" id="audience-checkbox-923">
                <div class="checkbox-element"><svg class="svg-inline--fa fa-check fa-w-16 icon animated bounceIn" aria-hidden="true" data-prefix="far" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""></svg><!-- <i class="icon far fa-check animated bounceIn"></i> --></div>
            </div>
                            </div>
        </div>

And this is the checked one:

<div class="list-item-cell checkbox-list-item">
                <div class="checkbox audience-checkbox-individual checked">
            <div class="checkbox-in">
                <input type="checkbox" name="audience-checkbox-923" id="audience-checkbox-923">
                <div class="checkbox-element"><svg class="svg-inline--fa fa-check fa-w-16 icon animated bounceIn" aria-hidden="true" data-prefix="far" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""></svg><!-- <i class="icon far fa-check animated bounceIn"></i> --></div>
            </div>
                            </div>
        </div>

So the only thing that changes is the class name. It gets a checked attribute. I searched for the actual checkbox, but it behind from the page, and its on the top. I tried to click on it but I got an error like it cannot find that checkbox. Any idea?

Ohh plus info, these are in list items, so there are more checkboxes with the same name.