Default values is not populated into field in React 18 Strict Mode

[hozhaojung]

Component
FrontendEngine

Describe the bug
Text field value is blank even provided default values. This only happens in React 18 Strict Mode.
If disable strict mode, then value populated properly.
No issue for React 17 StrictMode (v17.0.2)

To Reproduce
Steps to reproduce the behavior:
1/ clone https://github.com/jellydn/react-18-demo
2/ update dependencies in package.json :

"dependencies": {
    "@ladle/react": "2.4.2",
    "@lifesg/web-frontend-engine": "^1.19.7",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-query": "beta",
    "styled-components": "^5.3.11"
  },

3/ Update App.tsx

import { FrontendEngine } from "@lifesg/web-frontend-engine";
import React from "react";

function App() {
  const schema = {
    id: "wrapper",
    defaultValues: {
      // "citizen-salutation": null,
      "citizen-name": "John Doe MyInfo",
      "citizen-nric": "S****782B",
      "citizen-email": "address@mail.com",
      "citizen-phone": "+65 84000000",
    },
    validationMode: "all",
    sections: {
      fixed: {
        children: {
          "citizen-name": {
            label: "Name (as in NRIC or passport)",
            uiType: "text-field",
            disabled: true,
            validation: [
              {
                required: true,
                errorMessage: "Please enter name.",
              },
              {
                matches: "/(^[^-\\s]{1}[a-zA-Z0-9_,'\\s-/@().]+$)|^$/",
                errorMessage: "Invalid name. Try again.",
              },
            ],
          },
          "citizen-nric": {
            children: {
              "citizen-nric": {
                label: "NRIC or FIN",
                uiType: "text-field",
                disabled: true,
                validation: [
                  {
                    required: true,
                    errorMessage: "Please enter NRIC or FIN.",
                  },
                ],
                customOptions: {
                  textTransform: "uppercase",
                },
              },
            },
            className: "short-width with-margin-bottom",
            uiType: "div",
          },
          "citizen-email": {
            label: "Email address",
            uiType: "email-field",
            validation: [
              {
                required: true,
                errorMessage: "Please enter email address.",
              },
              {},
            ],
          },
          "citizen-phone": {
            children: {
              "citizen-phone": {
                enableSearch: true,
                label: "Mobile number",
                uiType: "contact-field",
                defaultCountry: "Singapore",
                disabled: false,
                validation: [
                  {
                    required: true,
                    errorMessage: "Please enter mobile number.",
                  },
                ],
              },
            },
            className: "short-width with-margin-bottom",
            uiType: "div",
          },
        },
        uiType: "section",
      },
    },
  };

  const schema2 = {
    id: "my-form",
    validationMode: "onTouched",
    revalidationMode: "onChange",
    defaultValues: {
      "my-name": "John Doe",
      "my-age": 30,
      "my-text": "Some text",
    },
    sections: {
      "my-section": {
        uiType: "section",
        children: {
          "my-name": {
            uiType: "text-field",
            label: "Name",
            className: "my-class-name",
            validation: [
              {
                required: true,
                errorMessage: "My optional error message",
              },
              {
                max: 25,
                errorMessage: "Max 25 characters",
              },
            ],
          },
          "my-age": {
            uiType: "number-field",
            label: "Age",
            validation: [
              {
                required: true,
              },
              {
                min: 1,
                errorMessage: "Min. 1 year old",
              },
            ],
          },
          "my-wrapper": {
            uiType: "div",
            className: "col-2",
            children: {
              "my-text": {
                uiType: "text-field",
                label: "Something",
                className: "my-css-class",
                validation: [
                  {
                    required: true,
                  },
                ],
              },
            },
          },
        },
      },
    },
  };

  return (
    <div className="App">
      <header className="App-header">
        <FrontendEngine data={schema2} />
      </header>
    </div>
  );
}

export default function () {
  return (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

Expected behavior
schema:

schema2:

Screenshots (Bug)
schema:

schema2:

Additional context
Add any other context about the problem here.