Estoy tratando de crear una historia de libro de cuentos dentro de un archivo MDX que usa una devolución de llamada. No puedo entender cómo hacer esto y los documentos son muy ligeros, así que me pregunto si alguien sabe cómo abordar esto.

 <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> );

Cada vez que trato de poner algo dentro de la devolución de llamada, recibo advertencias durante el tiempo de ejecución y la historia del libro de cuentos ya no está disponible:

La compilación de ./src/components/Droplines/Droplines.stories.mdxModule falló (de ./node_modules/@mdx-js/loader/index.js):SyntaxError: /home/ian/src/chart-it/src/components/ Droplines/Droplines.stories.mdx: Token inesperado (14:15) 12 | y2: 150, 13 | }> 14 | });

¿Alguien sabe cuál es el enfoque correcto para agregar código para manejar devoluciones de llamada/eventos?