check uncheck conditionally - React

I am a beginner to react. I am using the following code in jsplayground. I need to check "None" by default and uncheck it as soon as other items are clicked. Also, as soon as all other items are checked, it should be checked automatically.

function SystemChecklist({ categories }) {
const availableCategories = [
 "eBPT",
"ELVIS",
"LIMS1",
"OTRS",
"ComLIMS",
"Concur",
"Relationwise",
"Mitrefinch",
"concord",
"ADP",
"zoho",
"fastfinder",
"TCP",
"MYOB Advanced",
"Trello",
"Freshdesk",
"Time Clock Plus",
"OSO",
"Concurs",
"iLeader",
// "Other",
"None"
];

const handleChange = category => {
const isSelected = categories.includes(category);
let payload = categories;

if (isSelected) {
  payload = categories.filter(c => c !== category);
} else {
  payload = [...categories, category];
}
  console.log(payload);
/*
dispatch({
  type: "CATEGORIES_CHANGE",
  payload
 });*/
};


return (
 <form>
    {availableCategories.map(category => (
      <div key={category} style=>
         <div>
        <input
          type="checkbox"
          name={category}
          id={category}
          value={category}
          style=
          onChange={() => handleChange(category)}
          checked={category == "None" ? true : categories.includes(category)}
        />
        </div> 
          <div>
       <label variant="h6" htmlFor={category}>{category}</label>
       </div>
      </div>
    ))}
  </form> 
);
}

ReactDOM.render(
<SystemChecklist categories={[]}/>,
mountNode
);