How to render two components inside a .md file for styleguidist in React?

I am trying to create a styleguide with custom components. I need to be able to insert components inside of each other and not sure how to do that inside of the .md file. I have a list and list items. I want to display the list items inside of the list. Getting this error in the styleguidist display. Here are some good examples but none that illustrate what I am trying to accomplish -- https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components

SyntaxError: Unexpected token (3:0) 1 : import ListItem from './ListItem' 2 : 3 :

List.tsx

    import React, { Component } from 'react'
    import './List.css'

    export interface IListProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class List extends Component<IListProps> {
      render() {
        const { children } = this.props
        return <ul className={'mtm-list'}>{children}</ul>
      }
    }

    export default List

List.md

    ```js
    import ListItem from './ListItem'

    <List>
       <ListItem> 
           Content in a List
       </ListItem>
    </List>

ListItem.tsx

    import React, { Component } from 'react'
    import './List.css'

    export interface IListItemProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class ListItem extends Component<IListItemProps> {
      render() {
        const { children } = this.props
        return <li className={'mtm-list-item'}>{children}</li>
      }
    }

    export default ListItem

I had to change the .md to this format and it worked, specifically adding the semicolon.

```jsx
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
  <Placeholder />
</Button>
```