Why doesn't componentDidCatch work?

Question

React

Made the ErrorBoundary component wrap the application

import React, { Component } from 'react'

class ErrorBoundary extends Component {
    state = {
        hasError: false
    }

    componentDidCatch(error, info) {
        console.log(error)
        console.log(info)
        this.setState({
            hasError: true
        })
    }

    render () {
        if(this.state.hasError) {
            return <h1>Какая-то ошибка</h1>
        }
        return this.props.children
    }
}

export default ErrorBoundary

When mounting one of the components, a request is made to the server

export const postVolonteerList = async (page = 1, perPage = 10, filters) => {
    try {
        let res = await instance
            .get(
                `/api/voluinteers`,
                {
                    params: {
                        page: page,
                        page_size: perPage,
                        ...filters
                    }
                });
        return res.data
    }catch(err){
        console.log('ОШИБКА', err.message);
        throw err
    }
};

I deliberately made an invalid request and throw an error in catch, but ErrorBoundary does not catch it. What could be the reason

Answer 1

componentDidCatch is triggered when an error occurs during rendering, or when an error occurs when working with state