Не могу писать в input

Основная проблема состоит в том, что мне на сайте захотелось сделать глобальную проверку на авторизацию через заглушку. У меня это слабо получается. Но параллельно вылезла еще ошибка которую я не могу решить в силу очень слабой компетенции. У меня пропала возможность писать в импутах на странице SignIn, код уже несколько раз перепроверил, ошибок не вижу, гугл тоже не помогает... Весь код прилагаю:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter ,createBrowserRouter,  RouterProvider,} from "react-router-dom";
import {AuthContext, AuthProvider} from './Components/AuthContext' 


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <AuthContext.Provider
      value={{isLoggedIn: false,
      handleLogin: () => {},
      balance: 5000, 
      handleBalance: () => {},
      username: '',
      handleLoginClick: () => {},
       }}>
     <App />
  </AuthContext.Provider>
  </BrowserRouter>
    
    
 
);

app.js

import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navibar from './Components/Navibar';
import Home from './pages/home';
import SignIn from './pages/SignIn';
import SignUp from './pages/SignUp';
import BlackJack from './pages/bj';
import NotFound from './pages/notFound';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { AuthContext } from './Components/AuthContext';



function App() {
const [auth, setAuth] = React.useState(false);


  return (
    <div className="App">
     <Navibar />
     
    <Routes>
      
      <Route path="/home" element={<Home />} />
      <Route path="/signIn" element={<SignIn />} />
      <Route path="/signUp" element={<SignUp />} />
      <Route path="/bj" element={<BlackJack />} />
      <Route path="/" element={<NotFound />} />
    </Routes>
          
    </div>
  )
}

export default App;

SignIn.jsx

import React , { useState, useContext, useEffect}from "react";
import Button, { ButtonGroup } from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css';
import { BrowserRouter, Routes, Route, Link, Navigate, useNavigate, useHistory } from 'react-router-dom';
import { AuthContext } from "../Components/AuthContext";





export default function SignIn() {

      const {   isLoggedIn, 
                handleLogin, 
                redirectToHome, 
                formData, 
                handleChange, 
                handleLoginClick, 
                username, 
                balance, 
                handleBalance } = useContext(AuthContext);
            

    return (
    <div>
        {!isLoggedIn ? (
            <div className="form">
                <h1>Войти в аккаунт</h1>
            <input 
            className="input" 
            type="text" 
            placeholder="Логин" 
            name="username" 
            value={formData ? formData.username : ''} 
            onChange={handleChange}/>
            <input 
            className="input" 
            type="password" 
            placeholder="Пароль" 
            name="password" 
            value={formData ? formData.password : ''} 
            onChange={handleChange} />
            <Button variant="dark" onClick={handleLoginClick} log>Войти</Button>
            
            <Link className="nav-link" id="signUp" to="/signUp">Еще нет аккаунта?</Link>
            </div>
            
        ):(
            <div>
            
            <h2>Приветствуем тебя, {formData.username}</h2>

            
          </div>
        )}
        {isLoggedIn && redirectToHome && <Navigate to="/home" />}
         
        
        
        
    </div>
    )

}

AuthContext.jsx

import React, { createContext, useContext,  useState,   useEffect } from "react";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import SignIn from "../pages/SignIn";

export const AuthContext = createContext(null)

export const AuthProvider = ({ children }) => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [username, setUsername] = useState('');
    const [formData, setFormData] = useState({
        username: '',
        password: ''
      });
    const [redirectToHome, setRedirectToHome] = useState(false);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prevFormData => ({
            ...prevFormData,
            [name]: value
        }));
    };
    
    
      const handleLoginClick = () => {
        handleLogin(formData.username, formData.password);
        setRedirectToHome(true);
      };
  
    const handleLogin = (username, password) => {
        console.log(username, password);
      if (username === 'admin' && password === 'admin') {
        setIsLoggedIn(true);
        setUsername(username);
      } else {
        alert('Неправильное имя пользователя или пароль');
      }
    };

    const [balance, setBalance] = useState(5000);

    const handleBalance = () => {
        setBalance(balance - 100);
    }
  
    return (
      <AuthContext.Provider value={{ isLoggedIn, handleLogin, balance, handleBalance }}>
        {children}
      </AuthContext.Provider>
    );
  };

home.jsx

import React , { useState, useContext, useEffect}from "react";
import SexButton from "../UI/SexButton";
import './styles.css';
// import ManePage from "../img/ManePage.jpg"
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import { AuthContext } from "../Components/AuthContext";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

export default function Home() {
    
    const { isLoggedIn, balance, handleBalance, username } = useContext(AuthContext);
    return (
        <div>
        {isLoggedIn  ? (
          <div>
            <span id="welcome">Добро пожаловать, {username}!</span>
            <span id="balance">Balance: {balance} $</span>
            <Button variant="primary" onClick={handleBalance}>Поставить деньги</Button>
          </div>
        ) : (
          <span id="welcome">Мы бы сказали тебе привет, если бы ты вошел в аккаунт</span>
        )}
        <h1>Главная страница</h1>
        <img src={require('../img/ManePage.jpg')} alt="" width='100%'/>
        <SexButton />
      </div>
    )
}

Так же буду рад, если буду указаны и другие ошибки в коде.