Pass `staticMediaQuery` to ScrollyCoding via props

[jgarrow]

I'm working on a docs site that has multiple different page layouts. Depending on the page, I want to be able to override the codeConfig options on the component level. Specifically, I'm wanting to change the value of staticMediaQuery for the Scrollycoding component depending on which page layout is being used. However, passing a codeConfig prop appears to always be overridden by the config values at the plugin configuration level.

Example expected implementation

Neither of these attempts seem to have any effect.

<CH.ScrollyCoding codeConfig={{staticMediaQuery: "not screen (max-width: 960px)"}}>

OR

<CH.ScrollyCoding staticMediaQuery="not screen (max-width: 960px)" >

Example repo

I'm running into this issue both in the site I'm working on as well as in this minimal reproducible example:

I've added a staticMediaQuery both to the next.config.js and a differing media query in the CH.Scrollycoding component's props in the scrollycoding.mdx file.

StackBlitz link