Testcafe - Selecting checkbox using id always end up with the full timeout wait

Our html codes for checkbox always look something like this

<div id="paymentCheckBoxesMod" class="c-form__checkbox-container u-spacing__margin-bottom--16 u-spacing__margin-top--16"> <input type="checkbox" id="supplementaryAgreement" aria-describedby="paymentsCheckboxLabel"> <label for="supplementaryAgreement"> </label>

ive always located the element using the label's for="supplementaryAgreement" because if i use the input's id="supplementaryAgreement"i end up having to wait for the timeout duration before the element is located. Does anyone know why?

so that has worked fine until i have to work for iframes and although ive already switched back to mainframe however i will get the error that there is no match on the DOM tree if i use for="supplementaryAgreement" now. It still work with id="supplementaryAgreement" but having to wait for it to timeout doesn't seem efficient.