Checkboxes e renderização condicional em React

Vamos fazer com que, dependendo da marcação de uma checkbox, seja exibido na tela um trecho de código ou outro. Vamos usar para isso a renderização condicional:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>mensagem 1</p>;
	} else {
		message = <p>mensagem 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

É dada uma checkbox. Usando a checkbox, pergunte ao usuário se ele já tem 18 anos. Se a checkbox estiver marcada, mostre ao usuário o seguinte bloco de código:

<div>
	<h2>Uhu, você já tem 18 anos</h2>
	<p>
		aqui está o conteúdo apenas para adultos
	</p>
</div>

E se a checkbox não estiver marcada - então o seguinte:

<div>
	<p>
		infelizmente, você ainda não tem 18 anos:(
	</p>
</div>

É dada uma checkbox e um parágrafo. Se a checkbox estiver marcada, deixe o parágrafo visível na tela, e se não estiver marcada - oculte-o.