How to unregister and remove old service worker?

I have register a service woker using .register and can see in Application tab in dev tool. now my questionn is how to unregister this service worker.

I have run this script

if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
                console.group('====SW registration=======');
                navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
                    console.log('SW registratered successfully');
                    console.log(registration);
                    registration.unregister().then(function(result) {
                        console.log('Unregistered done', result);
                    });
                }).catch(function(error){
                    console.error('sw registration failed', error);
                });
                console.groupEnd();
        });
}

But I see that by doing this, we are actually first registering the service worker and then unregister it. This seems not the correct way to me.

Alternatively, I can click on unregister link near to the service worker from dev tools Application > Service Workers and also click on Application >Clear Storage and re-open the URL in the new tab.

but when I check through chrome://serviceworker-internals/

it displays the list of old and unregistered service worker at bottom of list ( see image)

So why I am seeing the redundant service worker list here? when will it update? does this is the default behaviour of chrome browser.