Can't use `can_copy=True` in `rx.code_block(...)` within `rx.markdown(...)` -- "oneDark is not defined"

[TimChild]

Describe the bug Setting can_copy=True in rx.code_block within component_map of rx.markdown results in an error about the oneDark theme.

To Reproduce Steps to reproduce the behavior:

import reflex as rx

@rx.page(route="/markdown_with_copy", title="Markdown with copy")
def index() -> rx.Component:
    return rx.markdown(
        """

    def foo():
        pass
    ```
    """,
    component_map={
        "codeblock": lambda text, **props: rx.code_block(
            text, **props, can_copy=True)
    }
)

**Expected behavior**
No error.

**Screenshots**
![image](https://github.com/user-attachments/assets/d31a6b56-7ed8-439c-b2a3-b425a7e6eb30)

282 | const { resolvedColorMode } = useContext(ColorModeContext) 283 | return (

284 | {"h1": ({node, children, ...props}) => <RadixThemesHeading as={h1} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={6} {...props}> {children}, "h2": ({node, children, ...props}) => <RadixThemesHeading as={h2} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={5} {...props}> {children}, "h3": ({node, children, ...props}) => <RadixThemesHeading as={h3} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={4} {...props}> {children}, "h4": ({node, children, ...props}) => <RadixThemesHeading as={h4} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={3} {...props}> {children}, "h5": ({node, children, ...props}) => <RadixThemesHeading as={h5} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={2} {...props}> {children}, "h6": ({node, children, ...props}) => <RadixThemesHeading as={h6} css={{"marginTop": "0.5em", "marginBottom": "0.5em"}} size={1} {...props}> {children}, "p": ({node, children, ...props}) => <RadixThemesText as={p} css={{"marginTop": "1em", "marginBottom": "1em"}} {...props}> {children}, "ul": ({node, children, ...props}) => <ul css={{"listStyleType": "disc", "marginTop": "1em", "marginBottom": "1em", "marginLeft": "1.5rem", "direction": "column"}}> {children}, "ol": ({node, children, ...props}) => <ol css={{"listStyleType": "decimal", "marginTop": "1em", "marginBottom": "1em", "marginLeft": "1.5rem", "direction": "column"}}> {children}, "li": ({node, children, ...props}) => <li css={{"marginTop": "0.5em", "marginBottom": "0.5em"}}> {children}, "a": ({node, children, ...props}) => <RadixThemesLink css={{"&:hover": {"color": "var(--accent-8)"}}} {...props}> {children}, "code": ({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?.*)/); const language = match ? match[1] : ''; if (language) { (async () => { try { const module = await import(react-syntax-highlighter/dist/cjs/languages/prism/${language}); SyntaxHighlighter.registerLanguage(language, module.default); } catch (error) { console.error(Error importing language module for ${language}:, error); } })(); } return inline ? ( <RadixThemesCode {...props}> {children} ) : ( <RadixThemesBox css={{"position": "relative"}} {...props}> <SyntaxHighlighter customStyle={{"padding": "1em 3.2em 1em 1em"}} language={language} style={isTrue(((resolvedColorMode) === (light))) ? oneLight : oneDark} children={children}/> <RadixThemesButton css={{"position": "absolute", "top": "0.5em", "right": "0"}} onClick={(...args) => addEvents([Event("_set_clipboard", {content:children})], args, {})}> <LucideCopyIcon css={{"color": "var(--current-color)"}}/> ); }, "codeblock": ({node, children, ...props}) => <RadixThemesBox css={{"position": "relative"}} {...props}> <SyntaxHighlighter customStyle={{"padding": "1em 3.2em 1em 1em"}} language={python} style={isTrue(((resolvedColorMode) === (light))) ? oneLight : oneDark} children={children}/> <RadixThemesButton css={{"position": "absolute", "top": "0.5em", "right": "0"}} onClick={(...args) => addEvents([Event("_set_clipboard", {content:children})], args, {})}> <LucideCopyIcon css={{"color": "var(--current-color)"}}/>} | ^ 285 | ) 286 | }

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.5.9
• OS: WSL2
• Browser (Optional): Chrome

[TimChild]

A related issue, trying to use any other components in the component_map results in a similar error, for example trying to wrap the rx.code_block in a box rx.box(rx.code_block(...).

^ I was hoping to be able to wrap the rx.code_blocks within markdown text in an rx.scroll_area component.