message: change as and render order in Controller and adding more detail on how as works with Controller
diff: @@ -1030,39 +1030,6 @@ React.useEffect(() => {
  it's optional if you are using FormContext.
  </td>
  </tr>
  - <tr>
  - <td>
  - <code>as</code>
  - </td>
  - <td>
  - <code className={typographyStyles.typeText}>React.ElementType</code>
  - </td>
  - <td></td>
  - <td>
  - <p style={{ marginTop: 0 }}>
  - Controller will inject <code>onChange</code>, <code>onBlur</code>{" "}
  - and <code>value</code> props into the component.
  - </p>
  -
  - <p>
  - Every prop you pass to the Controller component will be forwarded
  - to the component instance you provided with the <code>as</code>{" "}
  - prop. For instance, if you have a custom <code>Switch</code>{" "}
  - component that requires a <code>label</code> prop, you can pass it
  - to the Controller component directly and it will take care of
  - forwarding the prop for you.
  - </p>
  - <CodeArea
  - withOutCopy
  - url="https://codesandbox.io/s/react-hook-form-v6-controller-24gcl"
  - rawData={`<Controller
  - as={<TextInput />}
  - control={control}
  - name="test"
  -/>`}
  - />
  - </td>
  - </tr>
  <tr>
  <td>
  <code>render</code>
  @@ -1103,6 +1070,46 @@ React.useEffect(() => {
  />
  </td>
  </tr>
  + <tr>
  + <td>
  + <code>as</code>
  + </td>
  + <td>
  + <code className={typographyStyles.typeText}>React.ElementType</code>
  + </td>
  + <td></td>
  + <td>
  + <p style={{ marginTop: 0 }}>
  + Controller will inject <code>onChange</code>, <code>onBlur</code>{" "}
  + and <code>value</code> props into the component.
  + </p>
  +
  + <p>
  + Every prop you pass to the Controller component will be forwarded
  + to the component instance you provided with the <code>as</code>{" "}
  + prop. For instance, if you have a custom <code>Switch</code>{" "}
  + component that requires a <code>label</code> prop, you can pass it
  + to the Controller component directly and it will take care of
  + forwarding the prop for you.
  + </p>
  +
  + <p>
  + <b className={typographyStyles.note}>Note:</b> The following props
  + will be passed into your component: <code>onChange</code>,{" "}
  + <code>onBlur</code>, <code>value</code>.
  + </p>
  +
  + <CodeArea
  + withOutCopy
  + url="https://codesandbox.io/s/react-hook-form-v6-controller-24gcl"
  + rawData={`<Controller
  + as={<TextInput />}
  + control={control}
  + name="test"
  +/>`}
  + />
  + </td>
  + </tr>
  <tr>
  <td>
  <code>defaultValue</code>
  