Valor booleano no estado no React

Vamos criar um estado inCart que irá mostrar se o produto está ou não no carrinho:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		
	</div>;
}

Suponha que o valor false signifique que o produto não está no carrinho, e o valor true - que está no carrinho. Vamos exibir essa informação usando um operador ternário:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'no carrinho' : 'não no carrinho'}</span>
	</div>;
}

Agora vamos fazer um botão que, ao ser clicado, adiciona o produto ao carrinho:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'no carrinho' : 'não no carrinho'}</span>
		<button onClick={() => setInCart(true)}>btn</button>
	</div>;
}

Vamos modificar nosso código para que o primeiro clique no botão adicione ao carrinho, e o segundo clique remova dele:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'no carrinho' : 'não no carrinho'}</span>
		<button onClick={() => setInCart(!inCart)}>btn</button>
	</div>;
}

Faça um botão cujo clique irá banir o usuário e um botão cujo clique desbanirá o usuário.

Modifique a tarefa anterior para que dos dois botões, apenas o correspondente esteja sempre visível. Ou seja, se o usuário estiver banido, o botão de desbanir estará visível, e se não estiver banido - o botão de banir.