onVisitHighlightedLine cannot push classname using Rehype Pretty code

I'm using Rehype Pretty code to add syntax highlighting to my MDX blog. But I'm not able to get the line highlighting to work. As per the documentation and few other resources, below is the configuration that should work, but I'm getting the following error. _mdx_bundler_entry_point-f0976fc3-b34d-45fd-a559-565325298b22.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] TypeError: Cannot read properties of undefined (reading 'push') at onVisitHighlightedLine const options = { theme: 'one-dark-pro', // 'github-dark-dimmed' is default onVisitLine(node) { // Prevent lines from collapsing in `display: grid` mode, and allow empty if (node.children.length === 0) { node.children = [{ type: "text", value: " " }] } }, onVisitHighlightedLine(node) { node.properties.className.push("line--highlighted"); }, onVisitHighlightedWord(node) { node.properties.className = ["word--highlighted"] }, };