Error <div /> rendered in formInput without no error

[Ibabalola]

Describe the bug

1. When rendering the form input, on page load the:

<div class="dcx-error-message"></div>

render also when there's not an error Expected behaviour is to render only when an error appear.

2. Based on the GDS rules the container for the error message should be a p tag instead of a div tag as currently is.

<div class="dcx-error-message"></div>

needs to become:

<p class="dcx-error-message"></p>

A full example will be:

<div class="dcx-form-input  govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="national-insurance-number">
    National Insurance number
  </label>
  <div id="national-insurance-number-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </div>
  <p id="national-insurance-number-error" class="dcx-error-message govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
  </p>
  <input class="govuk-input govuk-input--error" id="national-insurance-number" name="nationalInsuranceNumber" type="text" aria-describedby="national-insurance-number-hint national-insurance-number-error">
</div>

3. For screen readers we need as well to provide:

 hiddenErrorText,
 hiddenErrorTextProps,

and it will behave like the following:

<p>
      <span {...hiddenErrorTextProps}>{hiddenErrorText}</span>{' '}{staticErrorMessage}
</p>