Rainbow brackets/bracket pair colorization not working in VSCode with Material Theme

Question

Having been a proud Webstorm user for almost a decade, Cursor convinced me to make the switch to a VSCode-like IDE setup (at least until there's a plugin with support for Claude available for JetBrains).

I used Material Theme UI and Rainbow Brackets extensively in my old Webstorm setup. Since moving across to Cursor, and having installed the equivalent plugins (MaterialTheme and Rainbow Brackets - I am aware that VSCode natively supports rainbow brackets). However, the rainbow brackets don't take effect.

Is there a solution for fixing this behaviour/overriding in Material Theme?

settings.json

{
    "editor.codeActions.triggerOnFocusChange": true,
    "editor.bracketPairColorization.enabled": true,
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "workbench.colorCustomizations": {
      "editorBracketHighlight.foreground1": "#E6E6E6",
      "editorBracketHighlight.foreground2": "#FF75B5",
      "editorBracketHighlight.foreground3": "#19f9d8",
      "editorBracketHighlight.foreground4": "#B084EB",
      "editorBracketHighlight.foreground5": "#45A9F9",
      "editorBracketHighlight.foreground6": "#FFB86C",
      "editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D",
    },
    "editor.guides.bracketPairs": "active"
}

Current output