Radios with conditional reveal and `defaultChecked` issues

[mikemonteith]

A checkbox using the defaultChecked and conditional props causes the conditional content to flicker and not display properly.

We have this code:

          <Radios
            name="haveNhsNumber"
            error={getFieldError(errors, "haveNhsNumber")}
          >
            <Radios.Radio
              value="yes"
              defaultChecked={vaccination?.haveNhsNumber}
              conditional={
                <TextInput
                  name="nhsNumber"
                  id="nhsNumber"
                  defaultValue={vaccination?.patient?.nhsNumber ?? undefined}
                  error={getFieldError(errors, "nhsNumber")}
                  label="NHS number"
                  hint="For example, 485 777 3456"
                  width={10}
                />
              }
            >
              Yes
            </Radios.Radio>
            <Radios.Radio
              value="no"
              defaultChecked={!vaccination?.haveNhsNumber}
            >
              No
            </Radios.Radio>
          </Radios>

The conditional content only shows after the Yes or No button has been clicked twice, and there's a flicker.