Chaining async jobs in gulp - gulp

Question

I am learning some tooling and would like to use gulp for automating certain task.
My problem is I am unable to chain the tasks one after another. Below is my minimal code illustrating the issue.
The package.json has "gulp": "^4.0.2" and below is my gulpFile.js:
var gulp = require('gulp');
function showMessage(message) {
setTimeout(() => {
console.log(message);
}, 500);
}
gulp.task('task1', async () => {
showMessage("task 1 executed")
});
gulp.task('task2', async () => {
showMessage("task 2 executed")
});
gulp.task('chainExample', gulp.series('task1', 'task2'));
When calling the chainExample task, the task1 and task2 console output are executed after the task are being completed:
$ gulp chainExample
[01:11:24] Using gulpfile ..\gulpfile.js
[01:11:24] Starting 'chainExample'...
[01:11:24] Starting 'task1'...
[01:11:24] Finished 'task1' after 2.21 ms
[01:11:24] Starting 'task2'...
[01:11:24] Finished 'task2' after 819 μs
[01:11:24] Finished 'chainExample' after 7.68 ms
task 1 executed
task 2 executed
What I am trying to accomplish is to have console outputs of respective tasks within its Starting and Finished lines.
I also tried using gulp4-run-sequence with no luck and same output:
var runSequence = require('gulp4-run-sequence');
gulp.task('chainExample1', function(done) {
runSequence('task1', 'task2', function() {
done();
});
});
Please shed some lights on how I can chain the tasks in a right way. Many thanks!