Slim4 PUT and DELETE not recognized when called in the browser - slim

Question

*According to the documentation https://www.slimframework.com/docs/v2/routing/put.html and https://www.slimframework.com/docs/v4/middleware/method-overriding.html I can mimic PUT or DELETE request in Slim4 by adding _method input and by adding Method Overriding Middleware
after the routing middleware. For some reason Chrome does not cooperate with me.
So here is my code:
routes.php:
$app->get('/dashboard', \App\Action\Dashboard::class);
$app->delete('/dashboard', function(Request $request, Response $response ) {
$response->getBody()->write("DELETING");
return $response;
});
$app->put('/dashboard', function(Request $request, Response $response ) {
$response->getBody()->write("ADDING");
return $response;
});
$app->post('/dashboard', function(Request $request, Response $response ) {
$response->getBody()->write("UPDATING");
return $response;
});
middleware.php
use Slim\App;
use Slim\Middleware\ErrorMiddleware;
use Slim\Views\TwigMiddleware;
use Slim\Middleware\MethodOverrideMiddleware;
return function (App $app) {
$app->addBodyParsingMiddleware();
$app->add(TwigMiddleware::class);
$app->addRoutingMiddleware();
$app->add(new Slim\Middleware\MethodOverrideMiddleware);
$app->add(ErrorMiddleware::class);
};
get('/dashboard', ...) displays a simple HTML:
<form action="/dashboard" method="post">
<input type="hidden" name="_METHOD" value="PUT"/>
<button type="submit">Send PUT request</button>
</form>
<form action="/dashboard" method="post">
<input type="hidden" name="_METHOD" value="DELETE"/>
<button type="submit">Send DELETE request</button>
</form>
Regardless which button I press, I got the Unexpected error:
POST header
Surprisingly, when I Chrome ARC to simulate PUT/DELETE requests, proper response is returned. I'm pulling my hairs out because of this. Can anybody show me what I did wrong and why my client (Chrome) is so stubborn?
Thank you in advance for any tip(s).