Stack Exchange
Log In process can not proceed with Material UI Input
The problem
When I hit the Log In button in the Log In page the browsers console gives and error:  POST http://localhost:3000/auth/login 500 (Internal Server Error)
Here is the entire code
import { Link } from "react-router-dom"
    import React from "./login.css"
    import "./login.css";
    import { useContext, useRef } from "react";
    import { Context } from "../../context/Context";
    import axios from "axios";
    import { useState } from "react"
    
    import Helmet from "react-helmet";
    
    import VisibilityIcon from '@mui/icons-material/Visibility';
    import IconButton from '@mui/material/IconButton';
    import InputLabel from '@mui/material/InputLabel';
    import InputAdornment from '@mui/material/InputAdornment';
    import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
    import Input from '@mui/material/Input';
    
    export default function Login() {
      const userRef = useRef();
      const passwordRef = useRef();
      const { dispatch, isFetching } = useContext(Context);
    
      const [passwordShown, setPasswordShown] = useState(false);
    
      const togglePassword = () => {
        // When the handler is invoked
        // inverse the boolean state of passwordShown
        setPasswordShown(passwordShown ? false : true);
      };
    
      const handleSubmit = async (e) => {
        e.preventDefault();
        dispatch({ type: "LOGIN_START" });
        try {
          const res = await axios.post("/auth/login", {
            username: userRef.current.value,
            password: passwordRef.current.value,
          });
          dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
        } catch (err) {
          dispatch({ type: "LOGIN_FAILURE" });
        }
      };
      return (
        <div className="login">
            <Helmet>
              <title>| Log In</title>
              <meta name="description" content="Sign In" />
            </Helmet>
                <span className="loginTitle">Login</span>
            <form className="loginForm" onSubmit={handleSubmit}>
                <label>Email</label>
                <div class="input-icons">
                <i class="fa-solid fa-envelope icon"></i>
                <input 
                type="text" 
                className="loginInput" 
                placeholder="Enter your email..."
                ref={userRef}
                />
                </div>
    
                <InputLabel>
                  Password
                </InputLabel>
                <Input
                  type={passwordShown ? "text" : "password"}
                  ref={passwordRef}
                  required 
                  className="loginInput"  
                  placeholder="•••••••••••"
                  endAdornment={
                    <InputAdornment position="end">
                    <IconButton
                  onClick={togglePassword}
                  
                  >{passwordShown ? <VisibilityIcon /> : <VisibilityOffIcon />}
                  </IconButton>
                  </InputAdornment>
                  }
                  
                />
    
            <button 
              className="loginButton" 
              type="submit" disabled={isFetching}>
                Login
            </button>
            {/*This button (Register) is inside the form if there is some problem in the future it's because of it. */}
            <button className="loginRegisterButton">
                <Link className="link" to="/register">Don't have an account yet? Sign Up</Link>
            </button>
            </form>
                
        </div>
      )
    }

I tried
removing the   to   and  to  and it worked without any error
The question
what I'm missing here? it it because of the material-ui? note that i'm using it in the Register page and there is no error!

I don't understand, what did you try? What does this mean "removing the to and to and it worked without any error" ? This seems like server side error

@Nemanja sorry, I meant removing the  and replace it with  , and removing <Input and replace with <input .. and it worked fine!
