How to use the gatsby-tinacms-remark.createRemarkButton function in gatsby-tinacms-remark

marginLeft: `auto`,
            marginRight: `auto`,
            maxWidth: rhythm(24),
            padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
          }}
        >
          © {new Date().getFullYear()}, Built with
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        
      
    )
  }
}

const CreatePostPlugin = createRemarkButton({
  label: "Create Post",
  filename({ title }) {
    return `content/blog/${title.replace(/\s+/g, "-").toLowerCase()}/index.md`
  },
  frontmatter({ title }) {
    // Asynchronously generate front matter by fetching data from some server.
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; {
        resolve({
          title,
          date: new Date(),
          heading_color: "pink",
          description: "My new post. ",
        })
      }, 1000)
    })

<>
      
        
      
      
        
          <header>
          {children}
          <footer>
        
      
    
  )
}

const CreatePostButton = createRemarkButton({
  label: "New Post",
  filename(form) {
    let slug = slugify(form.title.toLowerCase())
    return `content/posts/${slug}.md`
  },
  frontmatter(form) {
    let slug = slugify(form.title.toLowerCase())
    return new Promise(resolve =&gt; {
      setTimeout(() =&gt; {
        resolve({
          title: form.title,
          date: new Date(),
          type: "post",
          path: `/blog/${slug}`,
          draft: true,
        })</footer></header>