Input value not updating, dynamic input box when user opens popup window react/next js

Question

I have a problem where when a user opens a popup window to change their name, email, password, etc. the input box where they'd add their change won't collect their input and display the change.

I'm using react/next.js and my popup window is from the npm package "reactjs-popup"

Note: I don't think the fact that it's a popup window is relevant, just adding that for context. I believe the problem lies in the dynamic creation of the input boxes or something along the lines of that.

Example: user clicks on the edit email option -> popup window opens with an input box for them to change their email, when the user tries to type in that input box nothing shows, when I console log their change it only logs 1 letter at a time, with previous letters being replaced by the new one typed.

I've included the code below that I'm trying to use to make this work.

Code

// element -> identifier so I know which field the user wants to update, ex: element = "full_name"
// title -> the title of the popup, ex: title = "Change Full Name"
// content -> the current value of the field, ex: content = "John Doe"
const EditSettingPopupWindow = ({ element, user_id, title, content }) => {
    const [edit, setEdit] = useState("");
    const [inputType, setInputType] = useState(<>Loading...</>);
    const [popupTitle, setPopupTitle] = useState("");
    const [toChange, setToChange] = useState("");

    const fullNameInput = {
        input: (
            <input
            id="new-name"
            name="new-name"
            type="name"
            placeholder="Full Name"
            value={edit}
            onChange={(e) => setEdit(e.target.value)}
            autoComplete="name"
            required
            />
        ),
        title: "Change Name",
        toChange: `Current name: ${`PLACEHOLDER`}`,
    };
    const dateOfBirth = {...};
    const emailInput = {...};
    const phoneInput = {...};
    const addressInput = {...};
    const usernameInput = {...};
    const passwordInput = {...};
    const billingPlan = {...}

    const updateUserPassword = async (password) => {
        ...change password code
    };

    useEffect(() => {
        switch (element) {
            case "full_name":
                setInputType(fullNameInput.input);
                setPopupTitle(fullNameInput.title);
                setToChange(fullNameInput.toChange);
                console.log(fullNameInput.title);
                break;
            case "userId":
                setInputType(usernameInput.input);
                setPopupTitle(usernameInput.title);
                setToChange(usernameInput.toChange);
                console.log(usernameInput.title);
                break;
            ...(rest of switch cases)
        }
    }, [element]);


    const handleSubmit = async (e) => {
        e.preventDefault();
        if (element === "password") {
            await updateUserPassword(edit);
            setEdit("");
            Router.reload();
            return;
        };
        console.log('handleSubmit-not password');
        await updateFirestore(user_id, element, edit);
        setEdit("");
        Router.reload();
    };

    return (
        <>
        <Popup
        trigger={
            <span className={styles.rowContainer}>
                <h3 className={styles.rowInfo}>{title}</h3>
                <h3 className={styles.rowInfo}>{content}</h3>
                <IoIosAddCircleOutline />
            </span>
        }
        modal
        nested
        >
        {/* @ts-ignore */ }
        {close => {
        return (
            <div className="modal">
                <button className="close" onClick={close}>
                    &times;
                </button>
                <div className="header"><h3>{popupTitle}</h3></div>
                <div className="content">
                    <h4>{toChange}</h4>
                    <form onSubmit={(e) => {
                        handleSubmit(e);
                        close();
                    }}>
                        {inputType}

                        <button
                        type="submit"
                        id="submit"
                        value="Submit"
                        >
                        Submit
                        </button>
                    </form>
                </div>
                <div className="actions">
                    <button
                    className="button"
                    onClick={() => {
                        console.log('modal closed ');
                        close();
                    }}
                    >
                    Close
                    </button>
                </div>
            </div>
            )
        }}
        </Popup>
        </>
    )
};

Edit

So I changed the <form> code in the popup to this and it works, however it's not very elegant so I'd still like to use the old way if someone has a suggestion.

            <form id="updateSetting" onSubmit={(e) => {
                handleSubmit(e);
                close();
            }}>
                { element === "full_name" ? fullNameInput.input : null}
                { element === "userId" ? usernameInput.input : null}
                { element === "date_of_birth" ? dateOfBirth.input : null}
                { element === "usersAddress" ? addressInput.input : null}
                { element === "billing_plan" ? billingPlan.input : null}
                { element === "email" ? emailInput.input : null}
                { element === "phone_number" ? phoneInput.input : null}
                { element === "password" ? passwordInput.input : null}
                <button id="submit" value="submit" type="submit">Submit</button>
            </form>