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

Давайте сделаем так, чтобы в зависимости от отметки чекбокса, на экран выводился либо один кусочек кода, либо другой. Используем для этого условный рендеринг:

jsxfunction 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>;
}

Задание 1

Дан чекбокс. С помощью чекбокса спросите у пользователя, если ли ему уже 18 лет. Если чекбокс отмечен, покажите пользователю следующий блок кода:

jsx<div>
  <h2>Ура, вам уже есть 18</h2>
  <p>
    здесь расположен контент только для взрослых
  </p>
</div>

А если чекбокс не отмечен - то следующий:

jsx<div>
  <p>
    увы, вам еще нет 18 лет:(
  </p>
</div>

Задание 2

Дан чекбокс и абзац. Если чекбокс отмечен, пусть абзац будет видимым на экране, а если не отмечен - спрячьте его.