Checkboxes and Conditional Rendering in React

Let's make it so that depending on the checkbox mark, either one piece of code or another is displayed on the screen. Let's use conditional rendering for this:

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

Given a checkbox. Use the checkbox to ask the user if they are 18 years old. If the checkbox is checked, show the user the following code block:

<div>
	<h2>Hooray, you're already 18</h2>
	<p>
		This is where adult content is located
	</p>
</div>

And if the checkbox is not checked, then the next one:

<div>
	<p>
		Unfortunately, you are not 18 yet :(
	</p>
</div>

Given a checkbox and a paragraph. If the checkbox is checked, make the paragraph visible on the screen, and if it is not checked, hide it.