Exibindo erros de validação no servidor - Asp Core Web API + Axios + React Hook Form

Cenário

A partir do ASP.NET CORE 2.1, erros de validação no servidor, são enviados para o client no formato Validation Problem Details, que segue uma estrutura semelhante a seguir:

{
   "type":"https://tools.ietf.org/html/rfc7231#section-6.5.1",
   "title":"One or more validation errors occurred.",
   "status":400,
   "traceId":"|52643794-491d9e1d05c828e6.",
   "errors":{
      "Cnpj":[
         "'Cnpj' must not be empty."
      ],
      "CompanyPublicName":[
         "'Company Public Name' must not be empty."
      ],
      "CompanyInternalName":[
         "'Company Internal Name' must not be empty."
      ]
   }
}

Perceba que na response, há a propriedade errors, contendo as propriedades com falhas de validação.

Estou utilizando Axios para requisições HTTP, e para checar, se o retorno da requisição é um feedback de validação, eu checo se há a presença do response header:

Content-Type: application/problem+json; charset=utf-8

Sendo assim, vejamos meu bloco try...catch responsável por invocar o Axios:

try {
    let response = await AxiosInstance.post(
        '/general/companies', {}, {}
    )
} catch (e) {

    const serverSideErrors = e.response.data.errors;

    // Faz iteração nas propriedades do objeto Errors, e usa o método 
    // *SetError* do ReactHookForm, para informar um erro.
    Object.entries(serverSideErrors).map(([key, value]) =>
        setError(key, {
            message: value,
            type: 'serverSide'
        })
    )

}

Axios interceptor:

Agora, antes de tratar o retorno da API, é preciso converter os nomes das propriedades para lowerCamelCase.
Eu faço isso usando um interceptor, ao criar uma instância do Axios.

// Add a response interceptor
instance.interceptors.response.use(function(response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
}, function(error) {
    let newError = Object.assign({}, error);
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    if (newError.response.status === 400) {
        if (newError.response.headers['content-type'].includes('application/problem+json')) {
            /*
            Rename Problem Json response field names, to lower camel case
             */
            let serverData = newError.response.data;

            let errorsLowerCamelCase = Object.fromEntries(
                Object.entries(serverData.errors).map(([key, value]) =>
                    // Modify key here
                    [`${stringUtils.toLowerCamelCase(key)}`, value]
                )
            )

            newError.response.data.hasValidationErrors = true;
            newError.response.data.errors = errorsLowerCamelCase;
        }
    }
    return Promise.reject(newError);
});

Conclusão

Para renderizar os erros inline, estou usando bootstrap form-group, e o component ErrorMessage do próprio react-hook-form.

<ErrorMessage name="companyInternalName"
              errors={errors}
              render={({message}) =>
                <div className={'field-error text-danger'}>{message}</div>
              }

Configuro esse componente pra cada campo do formulário, e ao fazer submit do formulário, uma requisição HTTP é feita, o retorno é tratado, e o resultado é exibido abaixo:

Bônus: como exibir mensagens de validação globais? (que não estão associadas a nenhum campo específico)

A mensagem de resposta do servidor, para uma mensagem de validação global, deve ser conforme a seguir:

{
   "type":"https://tools.ietf.org/html/rfc7231#section-6.5.1",
   "title":"One or more validation errors occurred.",
   "status":400,
   "traceId":"|526437a6-491d9e1d05c828e6.",
   "errors":{
      "$":[
         "essa mensagem de validação aqui, não está associada a nenhum campo específico. 📍"
      ]
   }
}

Perceba que o identificador do campo, no objeto errors, é um símbolo $ .

Sendo assim, coloquei no topo da tela, um component < ErrorMessage /> , onde o atributo name="$" .
Isso me permite exibir no topo do formulário, erros globais de validação.

<ErrorMessage name="$"
errors={errors}
render={({message}) =>
  <>
    <FormGroup row>
      <Col md="4">
        <span>⚠️ Atenção:</span>
</Col>
<Col md="8">
  <div className={'field-error text-danger'}>{message}</div>
</Col>
</FormGroup>
</>
}
/>

---

Me avisa nos comentários se precisar de alguma ajuda.