diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
index 4496d10a2..0b3c1db7e 100644
--- a/examples/for-tests/src/App.js
+++ b/examples/for-tests/src/App.js
@@ -669,7 +669,7 @@ function getEmailVerificationConfigs({ disableDefaultUI }) {
 function getFormFields() {
     if (localStorage.getItem("SHOW_INCORRECT_FIELDS") === "YES") {
         return incorrectFormFields;
-    } else if (localStorage.getItem("SHOW_DEFAULT_FIELDS") === "YES") {
+    } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES") === "YES") {
         return formFieldsWithDefault;
     } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES") {
         return customFields;
diff --git a/test/end-to-end/signup.test.js b/test/end-to-end/signup.test.js
index f835217ec..bb2cc2d01 100644
--- a/test/end-to-end/signup.test.js
+++ b/test/end-to-end/signup.test.js
@@ -444,7 +444,7 @@ describe("SuperTokens SignUp", function () {
     describe("Signup default value for fields test", function () {
         beforeEach(async function () {
             // set cookie and reload which loads the form fields with default values
-            await page.evaluate(() => window.localStorage.setItem("SHOW_DEFAULT_FIELDS", "YES"));
+            await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES", "YES"));
 
             await page.reload({
                 waitUntil: "domcontentloaded",
@@ -480,14 +480,35 @@ describe("SuperTokens SignUp", function () {
 
             // input field default value
             const countryInput = await getInputField(page, "country");
-            const defaultCountry = await countryInput.evaluate((f) => f.value);
-            assert.strictEqual(defaultCountry, updatedFields["country"]);
+            const updatedCountry = await countryInput.evaluate((f) => f.value);
+            assert.strictEqual(updatedCountry, updatedFields["country"]);
 
             // dropdown default value is also getting set correctly
             const ratingsDropdown = await waitForSTElement(page, "select");
-            const defaultRating = await ratingsDropdown.evaluate((f) => f.value);
-            assert.strictEqual(defaultRating, updatedFields["ratings"]);
+            const updatedRating = await ratingsDropdown.evaluate((f) => f.value);
+            assert.strictEqual(updatedRating, updatedFields["ratings"]);
         });
+
+        // TODO
+        // it("Check if default values are getting sent in signup-payload", async function () {
+        //     const updatedFields = {
+        //         country: "USA",
+        //         ratings: "good",
+        //     };
+
+        //     await setInputValues(page, [{ name: "country", value: updatedFields["country"] }]);
+        //     await setSelectDropdownValue(page, 'select[name="ratings"]', updatedFields["ratings"]);
+
+        //     // input field default value
+        //     const countryInput = await getInputField(page, "country");
+        //     const updatedCountry = await countryInput.evaluate((f) => f.value);
+        //     assert.strictEqual(updatedCountry, updatedFields["country"]);
+
+        //     // dropdown default value is also getting set correctly
+        //     const ratingsDropdown = await waitForSTElement(page, "select");
+        //     const updatedRating = await ratingsDropdown.evaluate((f) => f.value);
+        //     assert.strictEqual(updatedRating, updatedFields["ratings"]);
+        // });
     });
 });
 
diff --git a/test/with-typescript/src/App.tsx b/test/with-typescript/src/App.tsx
index a053d3303..fe7d38c44 100644
--- a/test/with-typescript/src/App.tsx
+++ b/test/with-typescript/src/App.tsx
@@ -326,97 +326,6 @@ function getRecipeList() {
     ];
 }
 
-const formFieldsForSignUp = [
-    {
-        id: "email",
-        label: "Your Email",
-        placeholder: "Your work email",
-    },
-    {
-        id: "name",
-        label: "Full name",
-        placeholder: "First name and last name",
-    },
-    {
-        id: "age",
-        label: "Your age",
-        placeholder: "How old are you?",
-        validate: async (value) => {
-            if (parseInt(value) > 18) {
-                return undefined;
-            }
-
-            return "You must be over 18 to register";
-        },
-    },
-    {
-        id: "country",
-        label: "Your Country",
-        placeholder: "Where do you live?",
-        optional: true,
-    },
-];
-
-const customFormFieldsWithDefault = [
-    {
-        id: "terms",
-        label: "",
-        optional: false,
-        inputComponent: (inputProps) => (
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "left",
-                }}>
-                <input
-                    name={inputProps.name}
-                    type="checkbox"
-                    onChange={(e) => {
-                        if (inputProps.onChange) {
-                            inputProps.onChange(e.target.checked.toString());
-                        }
-                    }}></input>
-                <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
-            </div>
-        ),
-        validate: async (value) => {
-            if (value === "true") {
-                return undefined;
-            }
-            return "Please check Terms and conditions";
-        },
-    },
-    {
-        id: "ratings",
-        label: "Ratings",
-        getDefaultValue: () => "best",
-        inputComponent: (inputProps) => (
-            <select
-                value={inputProps.value}
-                name={inputProps.name}
-                onChange={(e) => {
-                    if (inputProps.onChange) {
-                        inputProps.onChange(e.target.value.toString());
-                    }
-                }}
-                placeholder="Add Ratings">
-                <option value="" disabled hidden>
-                    Select an option
-                </option>
-                <option value="good">Good</option>
-                <option value="better">Better</option>
-                <option value="best">Best</option>
-            </select>
-        ),
-        optional: true,
-    },
-];
-
-const getFormFieldsForSignUp = () => {
-    return localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES" ? customFormFieldsWithDefault : formFieldsForSignUp;
-};
-
 function getEmailPasswordConfigs() {
     return EmailPassword.init({
         resetPasswordUsingTokenFeature: {
@@ -435,7 +344,99 @@ function getEmailPasswordConfigs() {
                 style: theme.style,
                 privacyPolicyLink: "https://supertokens.io/legal/privacy-policy",
                 termsOfServiceLink: "https://supertokens.io/legal/terms-and-conditions",
-                formFields: getFormFieldsForSignUp(),
+                formFields: [
+                    {
+                        id: "email",
+                        label: "Your Email",
+                        placeholder: "Your work email",
+                    },
+                    {
+                        id: "name",
+                        label: "Full name",
+                        placeholder: "First name and last name",
+                    },
+                    {
+                        id: "age",
+                        label: "Your age",
+                        placeholder: "How old are you?",
+                        validate: async (value) => {
+                            if (parseInt(value) > 18) {
+                                return undefined;
+                            }
+
+                            return "You must be over 18 to register";
+                        },
+                    },
+                    {
+                        id: "country",
+                        label: "Your Country",
+                        placeholder: "Where do you live?",
+                        optional: true,
+                    },
+                    {
+                        id: "terms",
+                        label: "",
+                        optional: false,
+                        inputComponent: (inputProps) => (
+                            <div
+                                style={{
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "left",
+                                }}>
+                                <input
+                                    name={inputProps.name}
+                                    type="checkbox"
+                                    onChange={(e) => {
+                                        if (inputProps.onChange) {
+                                            inputProps.onChange(e.target.checked.toString());
+                                        }
+                                    }}></input>
+                                <span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
+                            </div>
+                        ),
+                        validate: async (value) => {
+                            if (value === "true") {
+                                return undefined;
+                            }
+                            return "Please check Terms and conditions";
+                        },
+                    },
+                    {
+                        id: "select",
+                        label: "Select",
+                        getDefaultValue: () => "option 2",
+                        inputComponent: (inputProps) => (
+                            <select
+                                onBlur={(e) => {
+                                    if (inputProps.onInputBlur) {
+                                        inputProps.onInputBlur(e.target.value);
+                                    }
+                                }}
+                                onFocus={(e) => {
+                                    if (inputProps.onInputFocus) {
+                                        inputProps.onInputFocus(e.target.value);
+                                    }
+                                }}
+                                value={inputProps.value}
+                                name={inputProps.name}
+                                onChange={(e) => {
+                                    if (inputProps.onChange) {
+                                        inputProps.onChange(e.target.value);
+                                    }
+                                }}
+                                placeholder="Select option">
+                                <option value="" disabled hidden>
+                                    Select an option
+                                </option>
+                                <option value="option 1">Option 1</option>
+                                <option value="option 2">Option 2</option>
+                                <option value="option 3">Option 3</option>
+                            </select>
+                        ),
+                        optional: true,
+                    },
+                ],
             },
         },