Handshake inactivity timeout while using VSCode SQL Tools

I'm using the SQL Tools extension for VSCode to connect to my database which is hosted on a Debian VM and whenever I try to connect to it, I always get a timeout error.

[1664037417336] INFO  (ext): EXECUTING COMMAND => sqltools.getConnections
[1664037417336] INFO  (ls): REQUEST RECEIVED => connection/GetConnectionsRequest
[1664037417337] INFO  (ext): EXECUTING COMMAND => sqltools.getConnections
[1664037417337] INFO  (ls): REQUEST RECEIVED => connection/GetConnectionsRequest
[1664037417338] INFO  (ls): REQUEST RECEIVED => connection/GetConnectionPasswordRequest
[1664037422395] INFO  (ls): REQUEST RECEIVED => connection/ConnectRequest
[1664037422395] INFO  (ls): Connection instance created for Social Bot (dev).
    ns: "conn-manager"
[1664037432398] ERROR (ls): {"code":-1,"data":{"driver":"MySQL","driverOptions":{"mysqlOptions":{"authProtocol":"default"}}},"name":"Error"}
    ns: "conn"
[1664037432399] ERROR (ls): Connecting error: {"code":-1,"data":{"driver":"MySQL","driverOptions":{"mysqlOptions":{"authProtocol":"default"}}},"name":"Error"}
    ns: "conn-manager"
[1664037432399] ERROR (ls): Open connection error
    ns: "conn-manager"
[1664037432401] ERROR (ext): ERROR: Error opening connection Handshake inactivity timeout, {"code":-1,"data":{"driver":"MySQL","driverOptions":{"mysqlOptions":{"authProtocol":"default"}}}}
    ns: "error-handler"

This is what my connection config looks like:

Why does this happen?