Neste laboratório, você irá gerar um OTP (Senha Única) de 6 dígitos e exibí-lo para o usuário. O OTP expirará após 5 segundos, e um novo OTP será gerado quando o usuário clicar no botão "Gerar Novo OTP". Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve usar o hook useEffect para gerenciar o temporizador regressivo. 2. Seu componente OTPGenerator deve retornar um elemento div com o nome da classe container. 3. O div com a classe container deve incluir os seguintes elementos:

• Um elemento h1 com o ID otp-title e o texto "OTP Generator".
• Um elemento h2 com o ID otp-display que exibe a mensagem "Click 'Generate OTP' to get a code" ou mostra o OTP gerado se estiver disponível.
• Um elemento p com o ID otp-timer e o atributo aria-live definido para um valor válido que:
• Começa vazio.
• Exibe "Expires in: X seconds" após o botão ser clicado, onde X representa o tempo restante antes do OTP expirar.
• Exibe a mensagem "OTP expired. Click the button to generate a new OTP." uma vez que a contagem regressiva atinja 0.
• Um elemento button com o ID generate-otp-button rotulado como "Generate OTP". Quando clicado, ele deve gerar um novo OTP e iniciar uma contagem regressiva de 5 segundos.
• O botão "Generate OTP" deve ser desabilitado enquanto a contagem regressiva estiver ativa.

4. Você deve garantir que o cronômetro regressivo pare automaticamente assim que atingir 0 segundos para evitar atualizações desnecessárias. 5. O OTP gerado deve ter 6 dígitos.

Testes:

• Você não deve remover a atribuição existente `const { useState, useEffect, useRef } = React;` do código.
• Você deve renderizar um `div` com a classe `.container`.
• O `.container` deve conter um elemento `h1` com o ID `otp-title` com o texto `"Gerador de OTP"`.
• O `.container` deve conter um elemento `h2` com o ID `otp-display` que exibe o OTP quando gerado.
• Inicialmente, o `h2` dentro de `.container` deve exibir a mensagem `"Clique em 'Gerar OTP' para obter um código"`.
• O elemento `.container` deve conter um elemento `p` com o ID `otp-timer`.
• O elemento `p` deve ter um atributo `aria-live` definido como `assertive` ou `polite`.
• Inicialmente, o elemento `p` deve estar vazio.
• O `.container` deve conter um elemento `button` com o ID `generate-otp-button` e o texto `"Gerar OTP"`.
• Quando o botão for clicado, ele deve exibir um novo OTP no elemento `h2` com id `otp-display`.
• O OTP gerado deve ter 6 dígitos.
• Quando o botão for clicado, o elemento `p` com id `otp-timer` deve mostrar uma contagem regressiva de 5 segundos.
• A mensagem no elemento `p` com id `otp-timer` deve ser atualizada a cada segundo para mostrar o tempo restante.
• O botão `"Gerar OTP"` deve ser desabilitado enquanto o cronômetro regressivo estiver em execução.
• O botão `"Gerar OTP"` deve ser habilitado assim que o cronômetro regressivo atingir 0.
• Quando o temporizador regressivo atingir `0`, você deve exibir a mensagem `OTP expirado.` Clique no botão para gerar um novo OTP.`.
• Você deve exportar o componente `OTPGenerator`.