Printed pdf is not updated even though the HTML view is - html

Question

I used ngx-print to print a section of my page. In that section, there is toggle button (switche) in two places. Both of them get updated using the same ngmodel. In the page, it's getting updated, but when I print it(used Microsoft print to pdf), it's stuck in the first change I did. ex:- If I turn on the button and then turn it off,then hit print, the button in the printed pdf is always turned off. Below is just how the buttons and the layout is used.
input {
display: none;
}
.toggle {
position: relative;
cursor: pointer;
}
.toggle:before {
content: "";
display: block;
width: 26px;
height: 10px;
border-radius: 15px;
background-color: #b0aeae;
}
.toggle span {
position: absolute;
top: -4px;
left: -1px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fafafa;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
transition: all 0.3s ease;
}
.toggle span .fas {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: white;
}
.checkbox:checked + .toggle:before {
background: #51a3f5;
}
.checkbox:checked + .toggle span {
left: -24px;
transform: translateX(35px);
background: #1976d2;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous" />
<!--Section that we use-->
<div class="switch-with-text d-flex align-items-center">
<input
type="checkbox"
id="checkbox1"
class="checkbox"
formControlName="stopSmoking"
[(ngModel)]="isChecked_stopSmoking"
(change)="recalculateScore('smoking',$event)"
/>
<label for="checkbox1" class="toggle">
<span>
<i class="fas"></i>
<i class="fas"></i>
</span>
</label>
<p>Stop smoking</p>
</div>
<!--Section that is getting printed-->
<div class="switch-with-text d-flex align-items-center" id="pdf">
<input
type="checkbox"
id="pdf_checkbox1"
class="checkbox"
[(ngModel)]="isChecked_stopSmoking"
/>
<label for="pdf_checkbox1" class="toggle">
<span>
<i class="fas"></i>
<i class="fas"></i>
</span>
</label>
<p class="switch-text">Stop smoking</p>
</div>
<button
class="btn btn-primary"
printSectionId="pdf"
ngxPrint
[useExistingCss]="true"
styleSheetFile="assets/css/print.css"
PrintWithCustomCss
>PRINT</button>
How do I fix this issue?