Table with checkboxes losing its checked state on a page scroll (no lazy-loading or virtual scrolling is implemented) in react js

I have a table in react js which has a column of checkboxes. On clicking the table header's checkbox, all of the children / table-row checkboxes gets checked. But when the table or page is scrolled. The checkboxes present in table row gets unchecked automatically, that is, the checked value is turning from true to false. Below is the code:

<table className="table">
 <tbody>
  <tr>
   <td className="cell">
     <span className="select-all">
      <input onChange={selectAllClicked} type="checkbox" value="24">
     <span/>
   <td/>
  <tr/>
  <tr>
   <td className="cell">
     <span className="child-input">
      <input type="checkbox" value="24">
     <span/>
   <td/>
  <tr/>
  <tr>
   <td className="cell">
     <span className="child-input">
      <input type="checkbox" value="24">
     <span/>
   <td/>
  <tr/>
<tbody/>

Below is the event handler used:

function selectAllClicked() {
  $("span.child-input input").prop("checked", $(".select-all input").is(":checked"));
}

It would be really helpful if someone helps me in resolving this issue.