I need a 2nd pair of eyes to look at my code, having trouble figuring it out on my own

Question

I'm having trouble figuring out why for some reason the my application sets isError to true... (the error is being caught even when the login is successful => when i refresh the page everything is ok). I am not sure if I explained it right, I'll be here to clear everything if something is unclear

import React, {Component} from "react";
import {NavLink, Navigate, redirect} from "react-router-dom";
import {Button, Form, Grid, Segment, Message} from "semantic-ui-react";
import AuthContext from "../AuthContext/AuthContext";
import {fitZoneApi} from "../../repository/FitZoneApi";
import {handleLogError} from "../Helpers/Helpers";

class Login extends Component {
    static contextType = AuthContext

    brojac = null;


    state = {
        username: '',
        password: '',
        isLoggedIn: false,
        isError: false
    }


    componentDidMount() {
        const Auth = this.context
        const isLoggedIn = Auth.userIsAuthenticated()
        this.setState({ isLoggedIn })
        // this.brojac= setTimeout(() => this.refresh(), 2000 )
    }

    handleInputChange = (e, { name, value }) => {
        this.setState({ [name]: value })
    }

    handleSubmit = (e) => {
        e.preventDefault()

        const { username, password } = this.state
        if (!(username && password)) {
            this.setState({ isError: true })
            return
        }

        fitZoneApi.authenticate(username, password)
            .then(response => {
                const { name } = response.data
                const authdata = window.btoa(username + ':' + password)
                const user = { name, authdata }

                const Auth = this.context
                Auth.userLogin(user)

                this.setState({
                    username: '',
                    password: '',
                    isLoggedIn: true,
                    isError: false
                })

            })
            .catch(error => {
                handleLogError(error)
                this.setState({ isError: true })
                // this.delay(5000)
                // this.refresh()
                this.brojac= setTimeout(() => this.refresh(), 2000 )
            })
    }

    refresh = () => window.location.reload(true)


    render() {
        const { isLoggedIn, isError } = this.state
        if (isLoggedIn) {
            return <Navigate to={'/'} />
        } else {
            return (
                <Grid textAlign='center'>
                    <Grid.Column style={{ maxWidth: 450 }}>
                        <Form size='large' onSubmit={this.handleSubmit}>
                            <Segment>
                                <Form.Input
                                    fluid
                                    autoFocus
                                    name='username'
                                    icon='user'
                                    iconPosition='left'
                                    placeholder='Username'
                                    onChange={this.handleInputChange}
                                />
                                <Form.Input
                                    fluid
                                    name='password'
                                    icon='lock'
                                    iconPosition='left'
                                    placeholder='Password'
                                    type='password'
                                    onChange={this.handleInputChange}
                                />
                                <Button color='blue' fluid size='large'>Login</Button>
                            </Segment>
                        </Form>
                        <Message>{`Don't have already an account? `}
                            <a href='/signup' color='teal'>Sign Up</a>
                        </Message>
                        {isError && <Message negative>The username or password provided are incorrect!</Message>}
                    </Grid.Column>
                </Grid>
            )
        }
    }
}

export default Login;

here is the fitZoneApi.authenticate method

function authenticate(username, password) {
    return instance.post('/login', {username, password})
}

this is the handleError method

export const handleLogError = (error) => {
    if (error.response) {
        console.log(error.response.data);
    } else if (error.request) {
        console.log(error.request);
    } else {
        console.log(error.message);
    }
}

I've tried wrapping is the code like this but same results:

.catch(error => {
                handleLogError(error)
                if(error){
                this.setState({ isError: true })
                }
               
                // this.delay(5000)
                // this.refresh()
                this.brojac= setTimeout(() => this.refresh(), 2000 )
            }

Also I have the refresh method because my component does not update after submitting the form, 2nd reason is because I got tired of doing it manually => even if I enter the proper credentials, the app doesn't authenticate me unless I reload the page. I am kinda new to this, be gentle please.... any help is appreciated <3 Much love