className gets removed clicking outside the div - reactjs

Question

I have the following code. By default Patriots will have btn-primary color which is blue and packers will have the default color of white. The color changes upon selection between the two buttons but when I click outside the div both button change to white. Really appreciate any suggestion. I am an absolute beginner btw.
class something {
constructor(props) {
super(props);
this.state = {
clicked: false
};
}
toggleView() {
this.setState({
clicked: true
});
}
render() {
var classRender = "btn-primary";
classRender = this.state.clicked ? "btn-primary" : "btn-primary selected ";
return (
<div>
<button
className={classRender}
type="button"
onClick={e => this.toggleView()}
>
Patriots
</button>
<button
className="btn-primary"
type="button"
onClick={e => this.toggleView()}
>
Packers{" "}
</button>
</div>
);
}
}

Answer 1

I just tested the code below it will update the button with selected class onClick and will keep selected if clicked outside
export default class Toggle extends Component {
constructor(props) {
super(props);
this.state = {
patriotsSelected : true
}
this.patriotsSelected = this.patriotsSelected.bind(this);
this.packersSelected = this.packersSelected.bind(this);
}
patriotsSelected(){
this.setState({patriotsSelected : true})
}
packersSelected(){
this.setState({patriotsSelected : false})
}
render() {
var patriotsClass = this.state.patriotsSelected ? "btn-primary selected" : "btn-primary";
var packersClass = this.state.patriotsSelected ? "btn-primary" : "btn-primary selected";
return (
<div>
<button className={patriotsClass} onClick={this.patriotsSelected} >
Patriots
</button>
<button className={packersClass} onClick={this.packersSelected} >
packers
</button>
</div>
);
}
}

Answer 2

So what's happening is even if you click the Packers button, the Patriots button still thinks it's clicked, because your assignment of 'this.state.clicked' is ambiguous in the toggleView method.
class something {
constructor(props) {
super(props);
this.state = {
clicked: null
};
}
toggleView(team) {
this.setState({
clicked: team
});
}
buttonClass(team) {
var clicked = this.state.clicked;
return (team === clicked ? "btn-primary" : "btn-primary selected ");
}
render() {
return (
<div>
<button
className={this.buttonClass('Patriots')}
type="button"
onClick={e => this.toggleView('Patriots')}
>
Patriots
</button>
<button
className={this.buttonClass('Packers')}
type="button"
onClick={e => this.toggleView('Packers')}
>
Packers{" "}
</button>
</div>
);
}
}