I need the Formulario() function to be opened by the "Eu li, concordo e aceito" button.

  async function Formulario() {
    const schema = Yup.object().shape({
      nome: Yup.string().required("Obrigatório!"),
      cpf: Yup.string().required("Obrigatório!"),
    });

    const submitvalue = () => {
      const frmdetails = {
        'Nome': nonce,
        'Cpf': cpff
      };
    };

    return (
      <ModalContent>
        <h2>Dados do assinante</h2>
        <Form schema={schema}>
          <Row>
            <Col>
              <Input
                type="text"
                placeholder="Nome"
                onChange={e => setNome(e.target.value)}
              />
            </Col>
          </Row>
          <Row hascols>
            <Col>
              <InputMask
                type="text"
                placeholder="Cpf"
                onChange={e => setCpf(e.target.value)}
              />
            </Col>
          </Row>
          <ModalFooter>
            <Button
              onClick={() => {
                submitvalue();
                aceitarTce();
              }}
              block
              variant="tangerine"
            >
              Aceitar
            </Button>
          </ModalFooter>
        </Form>
      </ModalContent>
    );
  } 

The button is in return for the export default function, where the async function is inserted.

  return (
      <Controles>
        {showControlls && (
          <>
            <Button
              variant="tangerine"
              onClick={() => Formulario()}
              loading={loading || undefined}
            >
              Li, concordo e aceito
            </Button>
            <Button onClick={recusarTce} loading={loading || undefined}>
              Recusar o contrato
            </Button>
          </>
        )}

I've tried several ways and I couldn't, I ask for someone's help. Code made in react.js and javascript, with backend in PHP and Slim framework.