lightning web component tabset with url navigation

main.html

<template>
    <lightning-tabset variant="vertical" active-tab-value={activeTabValue}>
        <lightning-tab label="Item One" value="one" onactive={handleActive}>
            First
        </lightning-tab>
        <lightning-tab label="Item 2" value="two" onactive={handleActive}>
            second
        </lightning-tab>
        <lightning-tab label="Item 3" value="three" onactive={handleActive}>
            third
        </lightning-tab>
    </lightning-tabset>
</template>

main.js

import { LightningElement, wire } from 'lwc'
import { CurrentPageReference, NavigationMixin } from 'lightning/navigation'

export default class Main extends NavigationMixin(LightningElement) {
    handleActive(event) {
        event.preventDefault()
        event.stopPropagation()
        this[NavigationMixin.Navigate](
            this.getUpdatedPageReference({
                c__tab: event.target.value
            }), true)
    }

    @wire(CurrentPageReference) currentPageReference

    get activeTabValue() {
        return this.currentPageReference?.state?.c__tab ?? 'two'
    }

    getUpdatedPageReference(stateChanges) {
        return Object.assign({}, this.currentPageReference, {
            state: Object.assign({}, this.currentPageReference.state, stateChanges)
        })
    }
}