Why is my React production app not working on mobile browsers?

I have currently deployed my web app, it works great on Desktop. The issue is strictly mobile. I'm able to load the website on mobile browsers for a second before a GET call (axios) that happens on the home page, then the mobile browser hangs on a white page.

My backend is built with Django. I also use Django to help collect the static files from npm run build.

Here is my package.json:

{
  "name": "buckets",
  "homepage": ".",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@reduxjs/toolkit": "^1.5.0",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "chartist": "^0.10.1",
    "react": "^17.0.1",
    "react-chartist": "^0.14.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.14.2",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-scroll": "^1.8.2",
    "react-window": "^1.8.6",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "PORT=4000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Also, here is the GET request which I think might be the culprit here?

export const getAllDemoBuckets = async (dispatch, cancelToken) =>
{
  try
  {
    const response = await axiosInstance.get('/demo/all', { cancelToken });
    dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
  } catch (err)
  {
    if ('isCancel' in err && err.isCancel())
    {
      return;
    }

    dispatch({ type: 'FETCH_ERROR' });
  }
}


const initialStateAllBuckets = {
    loading: true,
    error: '',
    data: []
}

const reducer = (state, action) =>
{
    switch (action.type)
    {
        case 'FETCH_SUCCESS':
            return {
                loading: false,
                data: action.payload,
                error: ''
            }
        case 'FETCH_ERROR':
            return {
                loading: false,
                data: {},
                error: "Something went wrong!"
            }
        default:
            return state
    }
}


export default function  HomeBucketsExample(props) {
    const {mobileView} = props
    const [allDemoBuckets, dispatchAllBuckets] = useReducer(reducer, initialStateAllBuckets)
    const ListLoading = LoadingComponent(HomeBucketLists);
    

    useEffect(() => {
        const source = axios.CancelToken.source()
        getAllDemoBuckets(dispatchAllBuckets, source.token);
        
        return () => {
          source.cancel();
        };
      }, []);
    
    return (
        <ListLoading mobileView={ mobileView} isLoading={allDemoBuckets.loading} buckets={allDemoBuckets.data} />
    );
}

Any ideas why my production app works on desktop but not mobile? Another thing that comes to mind is library compatibly. Looking forward to your responses.

EDIT: I have my domain set up on a digital ocean VM in the cloud. I'm only able to correctly load the production website on my laptop. When I use another device, I'm not able to get the domain working. The reason is my API paths are returning the wrong responses, which causes my React app to crash (again this is not a problem on my current local device)

Here are my django urls.py

def render_react(request):
    return render(request, "index.html") #<---- index.html from React

    
urlpatterns = [
   path('auth/', include('drf_social_oauth2.urls', namespace='drf')),
   path('admin/', admin.site.urls),
   path('api/', include('bucket_api.urls', namespace='bucket_api')),
   path('api/user/', include('users.urls', namespace='users')),
   path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

urlpatterns += [
   re_path('',render_react)  #<---- Serving React index.html
]

All of my API responses on other devices are returning the index.html. Hence why my website crashes on other devices. They should be returning JSON data. My API paths are currently configured to the correct live domain name, yet still the problem occurs. It's not a CORS issue, it's purely a pathing issue that is going on between my local device vs other devices.

from Why is my React production app not working on mobile browsers?