React Error Boundary Not Catching Axios Network Errors in Asynchronous useEffect Function

Question

I'm working on a React project where I use Axios to fetch data inside a useEffect hook. I'm also using React Error Boundary (useErrorBoundary from react-error-boundary) to catch and display errors. However, when a network error occurs (e.g., no connection), the error screen is displayed as expected, but I still see an Uncaught runtime error in the browser's console.

Here's a simplified version of my code:

import { useEffect, useState } from "react";
import api from "../utils/api";
import { useErrorBoundary } from "react-error-boundary";

export default function AddAnnouncementTutor() {
    const { showBoundary } = useErrorBoundary();
    const [data, setData] = useState({ categories: [] });
    const [fetching, setFetching] = useState({ categories: true });

    useEffect(() => {
        const fetchData = async () => {
            try {
                const categoriesRes = await api.get('/categories');
                setData({
                    categories: categoriesRes.data.map(c => ({
                        label: c.category_name,
                        key: c.id,
                    }))
                });
                setFetching({ categories: false });
            } catch (e) {
                setFetching({ categories: false });
                showBoundary(e);  // Show error boundary
            }
        };

        fetchData();
    }, [showBoundary]);

    if (fetching.categories) {
        return <SpinnerScreen />;
    }

    return (
        <div>
            {/* Form content */}
        </div>
    );
}

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import {ThemeProvider} from "@material-tailwind/react";
import AuthProvider from "./components/components/AuthProvider";
import {ResponsiveProvider} from "./components/components/ResponsiveProvider";
import {ErrorBoundary} from "react-error-boundary";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <ErrorBoundary fallback={<p>test</p>}>
        <ThemeProvider>
            <AuthProvider>
                <ResponsiveProvider>
                    <App/>
                </ResponsiveProvider>
            </AuthProvider>
        </ThemeProvider>
        </ErrorBoundary>
    </React.StrictMode>
);

App.js

import Home from "./pages/Home";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Layout from "./pages/Layout";
import SignIn from "./pages/SignIn"
import Announcements from "./pages/Announcements";
import About from "./pages/About";
import AddAnnouncementTutor from "./pages/AddAnnouncementTutor";
import SingUp from "./pages/SingUp";
import React from "react";
import TutorAnnouncement from "./pages/TutorAnnouncement";
import Test from "./pages/Test";
import {ErrorBoundary} from "react-error-boundary";
import ErrorScreen from "./components/components/ErrorScreen";

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout/>}>
                        <Route index element={<Home/>}/>
                        <Route path="/logowanie" element={<SignIn/>}/>
                        <Route path="/rejestracja" element={<SingUp/>}/>
                        <Route path="/ogloszenia" element={<Announcements/>}></Route>
                        <Route path="/o-serwisie" element={<About/>}></Route>
                        <Route path="/dodaj-korepetytor" element={<AddAnnouncementTutor/>}></Route>
                        <Route path="/ogloszenie/*" element={<TutorAnnouncement/>}></Route>
                        <Route path="/test/*" element={<Test/>}></Route>
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

enter image description here

I expect react error window not to show