Why private field handling does not work in an expected way in JavaScript?

I think the next (simplified) code should be working:

class WfConfigurable {
    constructor(config) {
        this._init(config);
    }
    _init(config) {
        this.configure(config);
    }
    configure(config) {}
}

class WfStateful extends WfConfigurable {
    #saveSuspend = 0;
    constructor(config) {
        super(config);
    }
    get saving() { return this.#saveSuspend == 0; }
    configure(config) {
        this.suspendSave();
        super.configure(config);
        this.continueSave();
    }
    suspendSave() {
        this.#saveSuspend++;
    }
    continueSave(force) {
        if (force) {
            this.#saveSuspend = 0;
        } else {
            this.#saveSuspend = Math.max(this.#saveSuspend - 1, 0);
        }
    }
}

class WfApp extends WfStateful {
    constructor(config) {
        super(config);
    }
}

const wfApp = new WfApp({});

But I have got the next error message:

TypeError: Cannot read private member #saveSuspend from an object whose class did not declare it
at WfApp.suspendSave ((index):24:13)
at WfApp.configure ((index):19:14)
at WfApp._init ((index):7:14)
at new WfConfigurable ((index):4:14)
at new WfStateful ((index):15:9)
at new WfApp ((index):37:9)
at (index):41:15

For example, this works well:

class A {
    #priv = 'hello';
    constructor() {
        console.log('A');
    }
    get priv() {
        return this.#priv;
    }
    set priv(p) {
        this.#priv = p;
    }
}

class B extends A {}

const b = new B();
b.priv += ' babe';
console.log(b.priv);

Writes out: "hello babe"