React Material UI Checkbox: How to check/uncheck other boxes in group by checking a different box?

I have 3 checkboxes set up, (Not Started, In Progress, Completed), that I would like allow only one to be checked at a certain time.

So if Not Started is automatically checked to begin with, how would I cause it uncheck 'Not Started' if I check 'Completed'?

Heres my code for now:

In App.js:

  const newGame = {
     id: uuid.v4(),
     title: title,
     hours: hours,
     notStarted: true,
     inProgress: false,
     completed: false,

  }

  notStarted = (id) => {
    this.setState({games: this.state.games.map(game => {
      if(game.id === id){

        game.notStarted = !game.notStarted
        game.inProgress = false;
        game.completed = false;
      }
    return game;
  })})
};

  markCompleted = (id) => {
this.setState({games: this.state.games.map(game => {
  if(game.id === id){

    game.completed = !game.completed
    game.notStarted = false;
    game.inProgress = false;
  }
  return game;
})})
};

And in the render() method:

<Backlog games={this.state.games} 
        markCompleted={this.markCompleted} 
        inProgress={this.inProgress}
        notStarted={this.notStarted}
/>

And this is the checkboxes in Game.js

<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.notStarted.bind(this, id)}
          />
      }
      label="Not Started"
/>
<FormControlLabel
      control={
         <Checkbox
              color="primary"
              onChange={this.props.markCompleted.bind(this, id)}
          />
      }
      label="Completed"
/>

As of now, I can successfully change the state of the props, but I'm unsure how to make the box check/uncheck according to the state?