How to use the react-static.useSiteData function in react-static

function ScreenModal ({ isOpen, onCancel, product, src, name }) {
  const { DOWNLOAD_URL } = useSiteData()
  const user = useFirebaseAuth()
  const showModal = useModal(SignupModal)

  const ref = user ? db.collection('users').doc(user.uid).collection('screens').doc(name) : null
  const doc = useFirebaseSync(ref)
  const isSaved = ref && doc && doc.data()

  const onToggle = async () => {
    const user =  firebase.auth().currentUser
    if (!user) return showModal()
    if (isSaved) return ref.delete()
    await ref.set({
      active: true,
      name,
    }).catch(console.error)
    await db.collection('screens').doc(user.uid).set()

function Dashboard () {
  const { SRC_URL } = useSiteData()
  const user =  firebase.auth().currentUser
  const ref = db.collection('users').doc(user.uid).collection('screens')
  const collection = useFirebaseSync(ref)
  const items = [] 
  if (collection) {
    collection.forEach(doc => {
      const name = doc.data().name
      const [productId] = name.split('.')[0].split('-')
      const lookup = products[productId] || {}
      items.push({
        name,
        product: { id: productId, ...lookup },
        src: `${SRC_URL}/${name}`,
      })
    })
  }

export default function Categories () {
  const { categories } = useRouteData()
  const { CACHE_URL } = useSiteData()
  
  return (
    
      
      <h2>Categories</h2>
      <div>
        
          {(categories || []).map(cat =&gt; (
            
              
            
          ))}</div>

function List ({ items }) {
  const { CACHE_URL } = useSiteData()
  const showModal = useModal(ScreenModal)

  const itemsEl = (items || []).map(({ src, name, maxHeight = (500 + 200 * Math.random()), product }, i) => (
    
      <div> showModal({ src, name, product })}
        css={styles.screen} 
        style={{ minHeight: 50, maxHeight }}&gt;
        <img alt="{name}" src="{`${CACHE_URL}/1200x/${src}`}">
      </div>
    
  ))
  return (
    
      
        {itemsEl.filter((_, i) =&gt; i % 2 === 0)}

function SideNav () {
  const { categories, products } = useSiteData()
  const categoriesEl = categories.map(({ id, name }) => {
    return (
      <div>
        
          {name}
        
      </div>
      
    )
  })
  const productsEl = products.map(({ id, name }) =&gt; {
    return (
      <div>
        
          {name}
        </div>

function SEO ({ description, lang, meta, title }) {
  const { siteTitle, siteImage, metaDescription, social } = useSiteData()

  const desc = description || metaDescription

  const image = siteImage ? [{
    property: `og:image`,
    content: siteImage,
  }, {
    name: `twitter:image`,
    content: siteImage,
  }] : []

  return (