How to dispatch Toggle Show/Hide Line Numbers

Please can you show why code to toggle line numbers is not working.
The editor displays exactly as expected, except line number never get hidden after calling toggleLineNos(). There are no browser or compile errors.
Other dynamic dispatches are working, example changing languages.
This is an Angular 20 app.

I would appreciate any knowledge or insights.

Relevant code sections are:

private lineNumberCompartment = new Compartment();
modified = false; // content flag
showLineNumbers = true;

let extensions: Extension = [
	basicSetup,
	this.languageCompartment.of(javascript()),
	javascript(),
	EditorState.tabSize.of((2)),
	EditorView.lineWrapping,
	this.lineNumberCompartment.of(lineNumbers()),
	EditorView.contentAttributes.of({ spellcheck: 'true' }),
	EditorState.allowMultipleSelections.of(true),
	oneDark,
	EditorView.updateListener.of((update) => {
		// Check if the document content has changed
		if (update.docChanged) {
			this.modified = true;
		}
	}),
];

toggleLineNos() {
	this.showLineNumbers = !this.showLineNumbers;

	this.editor.dispatch({
		effects: this.lineNumberCompartment.reconfigure(
			this.showLineNumbers ? lineNumbers() : []
		)
	});

      // NOTE: Enabling following code does update the editor but line numbers never hidden.
      // this.editor.dispatch({
      //   changes: { from: 0, insert: ' ' }, 
      // });	

}
	

basicSetup also includes lineNumbers, so even if your compartment doesn’t add them, they are still part of the configuration. You’ll have to inline basicSetup and edit it as appropriate.

Ah, I hadn’t understood that basicSetup extensions cannot be reconfigured.
Now after removing basicSetup the given code is working.
Thank you for replying. After a bit of a cold start, I’m definitely warming to CodeMirror!