Trying to use login-2FA and i am getting this error, Failed to load resource: the server responded with a status of 401 ()

Invalid OTP error when using front end, when I test API with swagger it works fine.

I am trying to implement asp.net 2FA authentication but i am getting error Invalid OTP when i try to use the front end, even though I received the email with the OTP. When i test the API using swagger i am able to get the JWT token and login.

OTPVerification.jsx

    function OTPVerification({ isOpen, onOpenChange, username, length = 6 }) {
    const { setIsLoading, isLoading, verifyOTP } = useAuth();

    const handleOtpSubmit = async (otp) => {
        setIsLoading(true);

        try {

            if (otp.length !== 6 || isNaN(otp)) {
                toast.error('Please enter a valid 6-digit OTP.');
                return;
            }
            console.log("Username: ", username);
            console.log("OTP: ", otp);
            const response = await verifyOTP(username,otp);
            console.log("Response: ", response);
            if (response.success) {
                toast.success('OTP Verified Successfully!');
                onOpenChange(false);
            } else {
                toast.error(response.message || 'OTP Verification Failed. Please try again.');
            }
        } catch (error) {
            console.error('Error during OTP verification:', error);
            const message = error.response?.data?.message || 'An error occurred during OTP      verification. Please try again.';
            toast.error(message);
        } finally {
            setIsLoading(false);
        }
    };

AuthContext,jsx

    async function verifyOTP(username, otp) {
    setIsLoading(true); // Start loading state
   
    try {
        const response = await axios.post('/api/Auth/login-2FA', {
            Username: username,
            OTP: otp
        });

        console.log('Sent OTP request:', { username, otp });

        if (response.data.Status === 'Success') {
            login(response.data.token, response.data.user);
            return { success: true, token: response.data.token, user: response.data.user };
        } else {
            return { success: false, message: response.data.Message };
        }
    } catch (error) {
        console.error('Error verifying OTP:', error);
        const message = error.response?.data?.message || 'An error occurred. Please try again.';
        return { success: false, message };
    } finally {
        setIsLoading(false); // Stop loading state
    }
}

AuthController.cs

    [HttpPost]
[Route("login-2FA")]
public async Task<IActionResult> LoginWithOTP([FromBody] OtpRequest request)
{
    // Validate the request
    if (request == null || string.IsNullOrEmpty(request.OTP) || string.IsNullOrEmpty(request.Username))
    {
        _logger.LogWarning("Invalid OTP request: Missing code or username.");
        return BadRequest(new { Status = "Error", Message = "Code and Username are required." });
    }

    // Find the user by username
    var user = await _userManager.FindByNameAsync(request.Username.ToLower());
    if (user == null)
    {
        _logger.LogWarning("OTP login attempt for non-existent user: {Username}", request.Username);
        return Unauthorized(new { Status = "Error", Message = "Invalid username or OTP ." });
    }
    if (await _userManager.IsLockedOutAsync(user))
    {
        _logger.LogWarning("User is locked out: {Username}", user.UserName);
        return Unauthorized(new { Status = "Error", Message = "User account is locked out." });
    }

    // Verify the OTP token
    var signInResult = await _signInManager.TwoFactorSignInAsync("Email", request.OTP, rememberClient: false, isPersistent: false);

        if (signInResult.Succeeded)
        {
        // Generate JWT token
        var authClaims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, user.UserName),
            new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())
        };

        // Add user roles to claims
        var userRoles = await _userManager.GetRolesAsync(user);
        foreach (var role in userRoles)
        {
            authClaims.Add(new Claim(ClaimTypes.Role, role));
        }

        // Generate token string using claims
        var jwtToken = GenerateTokenString(authClaims);

        _logger.LogInformation("2FA login successful for user: {Username}", user.UserName);

        return Ok(new
        {
            token = jwtToken,
            expiration = new JwtSecurityTokenHandler().ReadJwtToken(jwtToken).ValidTo
        });
    }

    _logger.LogWarning("Invalid OTP provided for user: {Username}.", request.Username);
    return Unauthorized(new { Status = "Error", Message = "Invalid OTP." });
}