React checkbox doesn't update on render correctly when clicked

I have the following code to display a list of options in dropdown

_.map(listOptions, (value) => {
           const { key, label, checked } = value;    
            return (
               <li key={key} onClick={(e) => this.onSelect(e, key, checked)}>
                   <input type="checkbox" checked={!!checked} onChange={(e) => this.onSelect(e, key, checked)}/>
                   {label}
               </li>
            );
})

When I click on a list item (outside the checkbox), the function call is made correctly which sets the state and the list options look good.

When I click on the actual checkbox, the checkbox is not enabled. It still remains in its previous state. When I click another checkbox, the previous one I clicked gets enabled. The options are always one step back to the current state.

This only happens when I click on a checkbox. The options work correctly when I click on the list item. I tried multiple things for input checkbox onChange like e.preventDefault() and e.stopPropagation, however it still doesn't work.