One checkbox resized on iOS

I have this unexpected behavior where one of my checkboxes gets resized, while the other remains consistent with its CSS code. This happens only on iOS, both with Safari and Chrome. I am using React. Here is what I see on my device: Screenshot of my device

And here comes the code. JSX:

const EmailInput = () => {
    return (
        <div className={'Email-input'}>
            <div className={'Email-input__text'}>
                <input type="email" id="email" size="1" required placeholder='La tua email'></input>
                <Button className={'Email-input__button'}>UNISCITI</Button>
            </div>

                <div className={'Email-input__check'}>
                    <input type="checkbox" id='firstCheck'/>
                    <label htmlFor="firstCheck">Lorem Ipsum is simply dummy text of the printing and typesetting industry</label>
                </div>
                <div className={'Email-input__check'}>
                    <input type="checkbox" id='secondCheck'/>
                    <label htmlFor="secondCheck">It is a long established fact that a reader will be
                        distracted by the readable content of a page when looking at its layout. The
                        point of using Lorem Ipsum is that it has a more-or-less normal distribution of
                        letters, as opposed to using 'Content here, content here', making it look like
                        readable English.</label>
                </div>
            </div>

    )
}

And CSS

.Email-input__check {
    display: flex;
    margin-bottom: 1rem;
}

.Email-input__check input[type="checkbox"] {
    margin: 0 1rem 0 0;
}

.Email-input__check label {
    color: #989898;
}

Thanks a lot for your help!