React: unhandled rejection (TypeError) failed to fetch

Question

I am following a tutorial on a chat application in react with a firebase and chatengine backend. all of my code seems to be correct based on the tutorial but i keep getting this error.

unhandled rejection code failing to fetch HERE

my code was running fine for a while then suddenly it stopped. Why? How do I fix it?

import React, {useRef, useState, useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { ChatEngine } from 'react-chat-engine';
import { auth } from './firebase';

import { useAuth } from '../contexts/AuthContext';
import axios from 'axios';

const Chats = () => {
    const history = useHistory();
    const { user } = useAuth();
    const [loading, setLoading] = useState(true);
    

    const handleLogout = async () => {
        await auth.signOut();
        history.push('/');
    }

    const getFile = async (url) => {
        const response = await fetch(url);
        const data = await response.blob();  
        return new File([data], "userPhoto.jpg", { type: 'image/jpeg' })
    }


    useEffect(() => {
        if(!user) {
            history.push('/');
            return;
        }
        // checks to see if user has already been created - trying to get the already created user
        axios.get('https://api.chatengine.io/users/me', {
            headers: {
                "project-id": process.env.REACT_APP_CHAT_ENGINE_ID,
                "user-name": user.email,
                "user-secret": user.uid,
            }
        })
        .then(() => {
            setLoading(false);
        })
        // if user does not already have a profile, create one
        .catch(() => {
            let formdata = new FormData();
            formdata.append('email', user.email);
            formdata.append('username',user.email);
            formdata.append('secret', user.uid);

            // calling api to get image
            getFile(user.photoURL)
            // calling api to create or fetch a user
                .then((avatar) => {
                    formdata.append('avatar', avatar, avatar.name);

                    axios.post('https://api.chatengine.io/users',
                        formdata,
                        { headers: { "private-key": process.env.REACT_APP_CHAT_ENGINE_KEY}}
                    )
                    .then(() => setLoading(false))
                    .catch((error) => console.log(error))
                })
        })
    }, [user, history]);

    if(!user || loading) return 'Loading...';

    return (
        <div className="chats-page">
            <div className="nav-bar">
                <div className="logo-tab">
                    Chit-Chat-Computer Networking
                </div>
                <div className="logout-tab" onClick={handleLogout}>
                    Logout
                </div>
            </div>

            <ChatEngine
                height="calc(100vh - 66px)"
                projectID = {process.env.REACT_APP_CHAT_ENGINE_ID}
                userName={user.email}
                userSecret={user.uid}
            />
        </div>
    );
}

export default Chats;

I would like to deploy this application so I need to make sure it is functioning properly. Help would be immensely appreciated.

I have tried adding mode:'no-cor' but that does not seem to allow my user to authenticate in.