I have this function in my home.jsx:

function GridListComponent(options) {
    return (
        <li>
            <input type="checkbox" id={options.id} />
            <label htmlFor={options.id}>{options.tileInfo}</label>
        </li>
    );
}

function Home() {
    return (
        <div className="home">
            <div class="container">
                <div class="row align-items-center my-5">
                    <div class="col-lg-12">
                        <h1 class="font-weight-light">Site Setting</h1>
                        <p>Pillar Selection:</p>
                    </div>
                    <ul className="grid">
                        <GridListComponent id="grid-opt-1" tileInfo="A" />
                        <GridListComponent id="grid-opt-2" tileInfo="B" />
                        <GridListComponent id="grid-opt-3" tileInfo="C" />
                        <GridListComponent id="grid-opt-4" tileInfo="D" />
                    </ul>
                </div>
            </div>
      <hr />
        </div>
    
    
    );
}

And it works fine. All I need is to pre-select 1 or 2 options. Currently, once the page loads, I see this: pageLoads

And here is what happens when click: pre-select

so All I need is to have A and C pre-selected.