Bug when trying to make use of .includes

I'm experiencing the following Bug when I'm trying to define what to return inside the request from axios.

This is my code:

async fetchTask() {
        const token = await AsyncStorage.getItem('access');
        const access = 'Bearer ' + token;
        axios.get(`https://example.com/api/auth/tasl/${this.props.navigation.getParam('id')}`, {
            headers: {
                'Authorization': access,
            }
        })
            .then(res => {
                const id = res.data.id;
                this.setState({ userid: id });
                this.setState({ subject: res.data.subject })
                this.setState({ task: res.data.task })
                this.setState({ image: res.data.task.image })
                this.setState({ progresses: res.data.progresses })
                this.setState({ dueDate: res.data.task.duedate })
                this.setState({ progressValue: res.data.progressValue })
                this.setState({ loading: false });
                if (res.data.task.completed == 1) {
                    this.setState({ isCompleted: true });
                }
                if(this.state.image.includes('http')){
                    converted = this.state.image;
                } else {
                    converted = `https://example.com/storage/${this.state.image}`;
                }
            }).catch(error => {
                this.props.navigation.goBack()
            })
    }

Why is this happening? The image is changed once I click any button.

<Image
   style=
   source=
/>

from Bug when trying to make use of .includes