How should return Jsx.Element for customizeTOC ?

[joisun]

Thanks for this awesome plugin, and I'm trying to wrap a <motion.div> for created TOC, but for some reason, It seems does not support the feature. Here is my related code:

.....
interface NodeTree {
  type: string;
  properties: {
    [key: string]: any;
  };
  children: (NodeTree | string)[];
}
function renderNodeTree(nodeTree: NodeTree): JSX.Element {
  const { type, properties, children } = nodeTree;

  const childElements = (children || []).map((child) => {
    if (typeof child === 'string') {
      return child;
    } else {
      return renderNodeTree(child);
    }
  });

  return React.createElement(type, properties, ...childElements);
}

function customizeTOC(toc:NodeTree){
  const tocJsx = renderNodeTree(toc)
  // return <motion.div>{tocJsx}</motion.div>
  return "Hello"
  // console.log('[toc]: ',tocJsx)
}
.....
      <ReactMarkdown
        className="markdown-body"
        children={contentStr || ''}
        rehypePlugins={[rehypeRaw,[rehypeToc,{customizeTOC,cssClasses:{toc:tocStyle['markdown-toc']}}]]}
        remarkPlugins={[remarkEmoji,remarkGfm,remarkMermaidjs]}
.....

Thanks again!