```js
import React, { useEffect, useState, useContext } from 'react';
import { authenticateUser } from '../utils/APIFunctions';
import AuthContext from '../context/AuthProvider';
import useRefreshToken from '../hooks/useRefreshToken';
import useAuth from '../hooks/useAuth';

const Login = () => {
	const [isLoading, setIsLoading] = useState(true);
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');
	const [errMsg, setErrMsg] = useState('');

	const { setAuth } = useContext(AuthContext);
	const refresh = useRefreshToken();
	const { auth } = useAuth();

	useEffect(() => {
		let isMounted = true;
		const verifyRefreshToken = async () => {
			try {
				console.log('try');
				await refresh();
			} catch (err) {
				console.log('catch');
				console.log({ err });
			} finally {
				console.log('finally');
				isMounted && setIsLoading(false);
			}
		};

		!auth?.accessToken ? verifyRefreshToken() : setIsLoading(false);

		return () => (isMounted = false);
	}, []);

	useEffect(() => {
		if (email || password) {
			setErrMsg('');
		}
	}, [email, password]);

	const handleSubmit = async (
		e: React.FormEvent<HTMLFormElement>
	) => {
		e.preventDefault();
		if (!email || !password) {
			setErrMsg('Please fill in the email and the password.');
		} else {
			try {
				const response = await authenticateUser({ email, password });
				
				const valid = response.data.valid;
				const name = response?.data?.name;
				const accessToken = response?.data?.accessToken;
				const roles = response?.data?.roles || [];

				if (valid) {
					setAuth({ email, name, roles, accessToken });
					// setEmail('');
					// setPassword('');
				} else {
				}
			} catch (err) {
				if (!err.response) {
					setErrMsg('No Server Response');
				} else if (err.response?.status === 400) {
					setErrMsg('Missing Username or Password');
				} else if (err.response?.status === 401) {
					setErrMsg('Unauthorized');
				} else {
					setErrMsg('Login Failed');
				}
			}
		}
	};

	return (
		<div className="container mt-4">
			<div className="d-flex justify-content-center">
				{isLoading ? (
					<p>Loading...</p>
				) : (
					<div className="login-wrapper border border-dark bg-secondary bg-gradient bg-opacity-25 p-3">
						{errMsg && (
							<div className="mb-3 text-danger">{errMsg}</div>
						)}
						<h2>Please Log In</h2>
						<form onSubmit={handleSubmit}>
							<div className="mb-3">
								<input
									type="text"
									className="form-control"
									placeholder="email"
									value={email}
									onChange={(e) => setEmail(e.target.value)}
									autoFocus
								/>
							</div>
							<div className="mb-3">
								<input
									type="password"
									className="form-control"
									placeholder="password"
									value={password}
									onChange={(e) => setPassword(e.target.value)}
								/>
							</div>
							<div className="text-center">
								<button className="btn btn-dark" type="submit">
									Submit
								</button>
							</div>
						</form>
					</div>
				)}
			</div>
		</div>
	);
};

export default Login;
```