Casillas de verificación y renderizado condicional en React

Hagamos que, dependiendo de si la casilla de verificación está marcada o no, se muestre un fragmento de código u otro en la pantalla. Utilicemos para ello el renderizado condicional:

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

Se da una casilla de verificación. Usando la casilla de verificación, pregunte al usuario si ya tiene 18 años. Si la casilla de verificación está marcada, muestre al usuario el siguiente bloque de código:

<div>
	<h2>¡Hurra, ya tienes 18 años!</h2>
	<p>
		aquí se encuentra el contenido solo para adultos
	</p>
</div>

Y si la casilla de verificación no está marcada, muestre el siguiente:

<div>
	<p>
		desafortunadamente, aún no tienes 18 años:(
	</p>
</div>

Se dan una casilla de verificación y un párrafo. Si la casilla de verificación está marcada, haga que el párrafo sea visible en la pantalla, y si no está marcada, ocúltelo.