I'm trying to create a storybook story within an MDX file that uses a callback. I can't figure out how to do this and the docs are very light so I'm wondering if anyone knows how to approach this?

<Meta title="Components/Droplines" component={Droplines} />

export const DroplinesTemplate = (args) => (
    <Chart
        onStoreCreated={(store) => {
            store.dispatch({
                type: "EVENT.ADD_DROPLINE",
                payload: {
                    isHorizontal: true,
                    color: "steelblue",
                    x1: 150,
                    x2: 0,
                    y1: 150,
                    y2: 150,
                }
            });

            store.dispatch({
                type: "EVENT.ADD_DROPLINE",
                payload: {
                    isVertical: true,
                    color: "steelblue",
                    x1: 150,
                    x2: 150,
                    y1: 150,
                    y2: 0,
                }
            });
        }}
    >
        <Droplines />
    </Chart>

);

Whenever I try to put anything inside the callback I get warnings during the runtime and the storybook story is no longer available:

./src/components/Droplines/Droplines.stories.mdxModule build failed (from ./node_modules/@mdx-js/loader/index.js):SyntaxError: /home/ian/src/chart-it/src/components/Droplines/Droplines.stories.mdx: Unexpected token (14:15) 12 | y2: 150, 13 | }> 14 | });

Does anyone know what the correct approach is for adding in code to handle callbacks/events?