How to programmatically ignore specific code blocks with rehype-highlight?

Question

I have some MDX pages that use rehype-highlight for syntax highlighting. I'd also like to use Sandpack to provide little runnable sandboxes, the way the React docs do (example, code).

So I need for rehype-highlight to act on standalone code blocks, but not on code blocks that are inside a <Sandpack> component.

// test.mdx
# Test

```js
const foo = () => {
    console.log('rehype-highlight should apply syntax highlighting here')
}
``` 

<Sandpack>

```js 
const foo = () => {
    console.log('rehype-highlight should not touch this')
}
```

</Sandpack>

According to the rehype-highlight docs, you can add a no-highlight class to a <code> block to have the highlighter ignore it. So I've tried inserting a little rehype plugin to add no-highlight to code blocks that are generated inside a <Sandbox> component. The plugin is doing what it's supposed to -- it's applying the class:

But in spite of the no-highlight class, the code block is still getting the highlighter markup applied to it, which gets in the way of my Sandpack component parsing it.

I've made a CodeSandbox repro here: http://codesandbox.io/p/sandbox/sandpack-vs-remark-rehype-rnh3tx

Is there a better way to programmatically get rehype-highlight to ignore code blocks that are inside a <Sandpack> component?

1. List item