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:

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

Задание 1

É 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:

jsx<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:

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

Задание 2

É 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.