message: update option order
diff: @@ -442,6 +442,42 @@ function Builder({ formData, showApi }: any) {
  <TableWrapper>
  <Table>
  <tbody>
  + <tr>
  + <td>
  + <H5 style={{ marginTop: 20 }}>
  + <code>
  + validationSchema: <MobileType>Object</MobileType>
  + </code>
  + </H5>
  + </td>
  + <td>
  + <p>
  + Apply form validation rules with <code>Yup</code> at the
  + schema level, please refer the{" "}
  + <CodeAsLink
  + onClick={() => goToSection("validationSchema")}
  + >
  + validationSchema
  + </CodeAsLink>{" "}
  + section.
  + </p>
  + </td>
  + <td>
  + <LinkToSandBox
  + style={{
  + position: "relative",
  + left: 0,
  + marginBottom: 20,
  + marginTop: 10,
  + float: "right",
  + }}
  + href="https://codesandbox.io/s/928po918qr"
  + target="_blank"
  + >
  + CodeSandbox
  + </LinkToSandBox>
  + </td>
  + </tr>
  <tr>
  <td>
  <H5 style={{ marginTop: 20 }}>
  @@ -496,42 +532,6 @@ function Builder({ formData, showApi }: any) {
  </p>
  </td>
  </tr>
  - <tr>
  - <td>
  - <H5 style={{ marginTop: 20 }}>
  - <code>
  - validationSchema: <MobileType>Object</MobileType>
  - </code>
  - </H5>
  - </td>
  - <td>
  - <p>
  - Apply form validation rules with <code>Yup</code> at the
  - schema level, please refer the{" "}
  - <CodeAsLink
  - onClick={() => goToSection("validationSchema")}
  - >
  - validationSchema
  - </CodeAsLink>{" "}
  - section.
  - </p>
  - </td>
  - <td>
  - <LinkToSandBox
  - style={{
  - position: "relative",
  - left: 0,
  - marginBottom: 20,
  - marginTop: 10,
  - float: "right",
  - }}
  - href="https://codesandbox.io/s/928po918qr"
  - target="_blank"
  - >
  - CodeSandbox
  - </LinkToSandBox>
  - </td>
  - </tr>
  <tr>
  <td>
  <H5 style={{ marginTop: 20 }}>
  