Troubleshooting rendering issues with a static document in Sanity v3

import {MdDashboard} from 'react-icons/md'
import {Card, Text, Stack, Heading, Container} from '@sanity/ui'

// import tutorialVideo from '../../../static/tutorial.MP4'
const videoUrl =
  '<https://cdn.sanity.io/files/q42ljy6v/production/304acb309bba8933769e16fee74cc52c1042e714.mov>'

export const usageGuide = () => {
  return {
    title: 'Sanity CMS Usage Guide',
    name: 'sanity-usage-guide', // localhost:3333/my-custom-tool
    icon: MdDashboard,
    component: (props) => {
      return (
        <>
          <Container>
            <Container paddingY={4}>
              <Stack space={4} padding={4}>
                <Heading>Quick Start Guide</Heading>
                <video controls width="100%" style={{maxWidth: '800px'}}>
                  <source src={videoUrl} type="video/mp4" />
                </video>
              </Stack>
            </Container>
            <Stack space={4} padding={4}>
              <Heading>Definitions:</Heading>
              <Heading>Sanity Concepts</Heading>
              <Text>Documents</Text>
              <Text>Object</Text>
              <Text>Reference</Text>
              <Text>Users & Roles</Text>
              <Heading>Properties</Heading>
              <Text>Villa Document</Text>
              <Text>Listings</Text>
              <Heading>Categories</Heading>
              <Text>Categories group villas into specific segments.</Text>
              <Heading>Collections</Heading>
              <Text>
                Collections are similar to categories, since they also help to segment villas into
                groups. The difference is that collections where conceive as 'landing page' approach
                that allows to quickly assign properties to each group to publish them.
              </Text>
            </Stack>
          </Container>
        </>
      )
    },
  }
}