React FastAPI login page keeps sending error 422

I am working on a registration/login page written in react, but the login aspect keeps giving me error 422. The registration works well for the most part and sends the correct info the backend, but the login keeps giving me error 422

Here is my code below that covers the registration and the login page

import './App.css';
import { useEffect, useState } from 'react';
import * as yup from "yup";
import {userSchema} from './Validations/UserValid'
import axios from 'axios';

function App() {
 
  
 
 
  const [fnameReg,setFnameReg]=useState('');
  const [lnameReg,setLnameReg]=useState('');
  const [org,setOrg]=useState('');
  const [emailReg,setEmailReg]=useState('');
  const [passwordReg,setpasswordReg]=useState('');




  const [username,setUsername]=useState('');
  const [password,setpassword]=useState('');
  
  const [loginStatus,setLoginStatus]=useState('')

  const createUser= async (event) =>{
    event.preventDefault();
    let formData ={
    firstname: event.target[0]?.value,
    lastname: event.target[1]?.value,
    organization: event.target[2]?.value,
    email: event.target[3]?.value,
    password: event.target[4]?.value,
    };
    const isValid= await userSchema.isValid(formData);
    console.log(isValid);

  };

 const register=()=>{
  axios.post('http://localhost:4060/users/new_user',{
    
    firstname:fnameReg,
    lastname:lnameReg,
    organization:org,
    email:emailReg,
    password:passwordReg,

  }).then((response)=>{console.log(response)})
 }


 const login=()=>{
  axios.post('http://localhost:4060/login',{
    username:username,
    password:password,
    
  }).then((response)=>{
    
      if(response.data.message){
        setLoginStatus(response.data.message);
      }else{
        setLoginStatus("Welcome "+response.data[0].Name)
      }


  })
 }
 
  /*
 useEffect(()=>{
    getWelcomeMessage()
 },[]) 
  */
  return (
    <div className="App">
        <h1>Our Future Reads</h1>
       
        <div className='registration'>
          <h2>Register New User</h2>
         
          <label>First Name:</label>
          <input type="text"
            onChange={(e)=>{
              setFnameReg(e.target.value);
            }}
          />
          <label>Last Name:</label>
          <input type="text"
            onChange={(e)=>{
              setLnameReg(e.target.value);
            }}
          />
           <label>Organization:</label>
          <input type="text"
            onChange={(e)=>{
              setOrg(e.target.value);
            }}
          />
          <label>Email:</label>
          <input type="text"
            onChange={(e)=>{
              setEmailReg(e.target.value);
            }}
          />
          <label>Password:</label>
          <input type="text"
           onChange={(e)=>{
            setpasswordReg(e.target.value);
          }}
          />
          <button onClick={register}>Register</button>
        </div>
       
      
   <div className='Login'>
          <h2>Login</h2>
          <input type= "text" placeholder="Email"
           onChange={(e)=>{
            setUsername(e.target.value);
          }}
          
          
          />
       
          <input type= "password" placeholder="password"
           onChange={(e)=>{
            setpassword(e.target.value);
          }}
          />
          <button onClick={login}>Login</button>

        </div>
     


     <h3>{loginStatus}</h3>
    </div>
  );
}

export default App;