How to replace “TRUE” with a checked checkbox and “FALSE” with a nonchecked checkbox in an HTML table?

I have a table that is formatted as

<table id="daily">

        <thead>
            <tr>
                <th class="year">year</th>
                <th class="cutoff">cut off date</th>
                <th class="name">Stefan</th>
                <th></th>
                <th class="name">Johnny</th>
                <th></th>
                <th class="name">Effie</th>
                <th></th>
                <th class="name">Karol</th>
                <th></th>
                <th class="name">Vardan</th>
                <th></th>
                <th class="name">Aman</th>
                <th></th>
                <th class="name">Jaspal</th>
                <th></th>
                <th class="name">Laurent</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-sheetdb-url="https://sheetdb.io/api/v1/xxxxxxxxx?sheet=Dashboard" data-sheetdb-sort-by="age"
            data-sheetdb-sort-order="desc">
            <tr>
                <td id="date">{{year}}</td>
                <td class="cutoff"><i>{{cut off date}}</i></td>
                <td id="hours">{{Stefan}}</td>
                <td class="checkbox">{{c1}}</th>
                <td id="total">{{Johnny}}</td>
                <td class="checkbox">{{c2}}</th>
                <td id="total">{{Effie}}</td>
                <td class="checkbox">{{c3}}</th>
                <td id="total">{{Karol}}</td>
                <td class="checkbox">{{c4}}</th>
                <td id="total">{{Vardan}}</td>
                <td class="checkbox">{{c5}}</th>
                <td id="total">{{Aman}}</td>
                <td class="checkbox">{{c6}}</th>
                <td id="total">{{Jaspal}}</td>
                <td class="checkbox">{{c7}}</th>
                <td id="total">{{Laurent}}</td>
                <td class="checkbox">{{c8}}</th>
            </tr>
        </tbody>
    </table>

The CSS I have is

#daily {
display: block;
position: relative;
background-color: #3C4AB8;
color: white;
border-collapse: collapse;
overflow-x: auto;
overflow-y: auto;
max-height: 80vh;
width: 90vw;
border: 10px solid #222A68;
font-family: 'Roboto Mono', monospace;
font-size: 20px;
margin-top: 2em;
margin-bottom: 2em;
}


#table thead th {
    position: sticky;
    top: 0;
}

td,
th {
    border: solid #E3DAFF 2px;
    padding: 0.5rem;
}

th {
    position: sticky;
    top: 0;
    border-top: none;
    background: #222A68;
    top: 0;
    text-align: center;
    padding: 8px;
    text-transform: uppercase;
}

td {
    border-bottom: none;
    white-space: wrap;
}

And so on.

This table fetches some data from a Google Sheet using https://sheetdb.io/ as a backend. There are values in some cells that are checkboxes returning as either “TRUE” or “FALSE”.

How can I replace these values with checkboxes that are checked when the value is “TRUE” and unchecked when the value is “FALSE”?

Thank you!