Why do I get an error while the error seems handled?

I have this piece of code:

const connectMetamask = async () => {
    try {
        if(!ethereum) return alert("Please install metamask");
        const accounts = await ethereum.request({ method: 'eth_requestAccounts'});
        setCurrentAccount(accounts[0]);
    } catch (error) {
        console.log(error.code);
    }
}

When this code is called, Metamask shows up. When I reject the connection, Metamask returns an error 4001 (as intented) but I can't catch it:

But also the 'catch (error)' is triggered. Why do I get an error while it seems also been handled? I found it has to do something with Promise, but I can't figure out how to handle this error correct.