HTML checkbox in React

I have two radio buttons based on which I want to show a list of checkboxes to the user. But the problem is that when user checks any checkbox in the first list, it automatically checks the boxes in the second list too.

Here are my radio buttons:

<input 
checked={optionLocal==='residential' ? 'checked' : ''}                                  
onClick={()=>{
setOptionLocal('residential')
}} 
type="radio" 
id="residential" 
name="option" 
value="residential"/>

<input 
checked={optionLocal==='commercial' ? 'checked' : ''} 
onClick={()=>{
setOptionLocal('commercial')
}} 
type="radio" 
id="commercial" 
name="option" 
value="commercial"/>

When I click one of them, it stores the state locally and based on that list is generated.

optionLocal === 'residential' ? (
                            residential.map((row,index)=>{
                                return(
                                    <li>
                                        <div className="d-flex flex-row align-items-baseline px-3">
                                            <input 
                                            type="checkbox" 
                                            id={'r-' + row} 
                                            name={'r-' + row} 
                                            value={'r-' + row}/>
                                        </div>
                                    </li>
                                )
                            })
                        ) : (
                            commercial.map((row,index)=>{
                                return(
                                    <li>
                                        <div className="d-flex flex-row align-items-baseline px-3">
                                            <input 
                                            type="checkbox" 
                                            id={'c-' + row} 
                                            name={'c-' + row} 
                                            value={'c-' + row}/>
                                        </div>
                                    </li>
                                )
                            })
                        )

Here is what is happening.