Чекбокси и условен рендеринг в React

Нека направим така, че в зависимост от отметката на чекбокса, на екрана да се извежда или едно парче код, или друго. Ще използваме за това условен рендеринг:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>съобщение 1</p>;
	} else {
		message = <p>съобщение 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

Даден е чекбокс. С помощта на чекбокса попитайте потребителя, дали вече има навършени 18 години. Ако чекбоксът е отметнат, покажете на потребителя следния блок код:

<div>
	<h2>Ура, вече имате навършени 18</h2>
	<p>
		тук се намира съдържание само за възрастни
	</p>
</div>

А ако чекбоксът не е отметнат - то следния:

<div>
	<p>
		уви, все още нямате навършени 18 години:(
	</p>
</div>

Даден е чекбокс и абзац. Ако чекбоксът е отметнат, нека абзацът бъде видим на екрана, а ако не е отметнат - скрийте го.