React Form Not Submitting on onSubmit, But Works with onClick

I am trying to submit a login form in my React application. I have attached the loginUser function to the form’s onSubmit event. However, when I press the login button, nothing happens, and no errors are shown in the console.

Interestingly, if I move the loginUser function to the button’s onClick event, it works as expected. I want the form to be submitted via the form’s onSubmit event, not the button’s onClick event. What could be causing this issue?

const toggleButton = () => {
    console.log("Clicking toggle button");
    setIsLogin((prev) => !prev);
};

const loginUser = (e) => {
    console.log("I am Login Now...!");
    e.preventDefault();
};

<form
    style={{
        width: "100%",
        marginTop: "10px",
        marginBottom: "10px",
    }}
    onSubmit={loginUser}
>
    <TextField
        required
        fullWidth
        label="UsernameOrEmail"
        margin="normal"
        variant="outlined"
    />
    <PasswordInput />

    <Button
        fullWidth
        variant="contained"
        color="info"
        type="submit"
        sx={{
            marginTop: "10px",
            marginBottom: "10px",
            fontSize: "1.2rem",
            textTransform: "capitalize",
            fontWeight: "600",
            letterSpacing: "0.05rem",
            padding: "0.5rem 1rem",
        }}
    >
        Login
    </Button>

    <Typography
        textAlign={"center"}
        margin={"1rem"}
        fontWeight={"600"}
    >
        OR
    </Typography>

    <Button color="primary" fullWidth onClick={toggleButton}>
        Register Instead
    </Button>
</form>