How to use the gatsby-tinacms-json.useLocalJsonForm function in gatsby-tinacms-json

}
      site: settingsJson(
        fileRelativePath: { eq: "/content/settings/site.json" }
      ) {
        logo
        title
        description
        author

        rawJson
        fileRelativePath
      }
    }
  `)

  const [nav] = useLocalJsonForm(data.nav, NavForm)
  const [globalTheme] = useLocalJsonForm(data.theme, ThemeForm)
  const [site] = useGlobalJsonForm(data.site, SiteForm)

  const themeContext = React.useContext(ThemeContext)
  const theme = themeContext.theme
  const pageTitle =
    page && page.title
      ? page.title
      : page && page.frontmatter && page.frontmatter.title
      ? page.frontmatter.title
      : ""
  const pageHero = page.frontmatter ? page.frontmatter.hero : page.hero
  const hero = pageHero
    ? merge({}, theme.hero, removeNull(pageHero))
    : theme.hero

export default function Page({ data }) {
  const [page] = useLocalJsonForm(data.page, PageForm)
  const blocks = page.blocks ? page.blocks : []

  return (
    
      
        {blocks &&
          blocks.map(({ _template, ...data }, i) => {
            switch (_template) {
              case "TitleBlock":
                return <title>
              case "ImageBlock":
                return &lt;Image data={data} /&gt;
              case "FormBlock":
                return &lt;Form form={data} /&gt;
              case "ContentBlock":
                if (data.content &amp;&amp; page.childrenPagesJsonBlockMarkdown[i])</title>

export default function List({ data, pageContext }) {
  const [page] = useLocalJsonForm(data.page, ListForm)
  const [authors] = useLocalJsonForm(data.authors, AuthorsForm)

  const { slug, limit, skip, numPages, currentPage } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage =
    currentPage - 1 === 1 ? slug : slug + "/" + (currentPage - 1).toString()
  const nextPage = slug + "/" + (currentPage + 1).toString()
  page.title = isFirst ? page.title : page.title + " - " + currentPage

  return (
    
      <>
        {data.posts &&
          data.posts.edges.map(item => {
            return (

site: settingsJson(
        fileRelativePath: { eq: "/content/settings/site.json" }
      ) {
        logo
        title
        description
        author

        rawJson
        fileRelativePath
      }
    }
  `)

  const [nav] = useLocalJsonForm(data.nav, NavForm)
  const [globalTheme] = useLocalJsonForm(data.theme, ThemeForm)
  const [site] = useGlobalJsonForm(data.site, SiteForm)

  const themeContext = React.useContext(ThemeContext)
  const theme = themeContext.theme
  const pageTitle =
    page && page.title
      ? page.title
      : page && page.frontmatter && page.frontmatter.title
      ? page.frontmatter.title
      : ""
  const pageHero = page.frontmatter ? page.frontmatter.hero : page.hero
  const hero = pageHero
    ? merge({}, theme.hero, removeNull(pageHero))
    : theme.hero

  return (

export default function List({ data, pageContext }) {
  const [page] = useLocalJsonForm(data.page, ListForm)
  const [authors] = useLocalJsonForm(data.authors, AuthorsForm)

  const { slug, limit, skip, numPages, currentPage } = pageContext
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const prevPage =
    currentPage - 1 === 1 ? slug : slug + "/" + (currentPage - 1).toString()
  const nextPage = slug + "/" + (currentPage + 1).toString()
  page.title = isFirst ? page.title : page.title + " - " + currentPage

  return (
    
      <>
        {data.posts &&
          data.posts.edges.map(item => {
            return (