React subcomponents with styled-components and typescript

menu.tsx

import React from 'react'
import styled from 'styled-components'

const MenuBase = styled.div`
	display: flex;
	flex-direction: column;
`

const MenuItem = styled.div`
	padding: 5px;
`

const MenuSubMenu = styled(MenuBase)`
	margin-left: 10px;
`

const Menu: typeof MenuBase & {
	Item: typeof MenuItem
	Menu: typeof MenuSubMenu
} = Object.assign(MenuBase, {
	Item: MenuItem,
	Menu: MenuSubMenu,
})

const example = (
	<Menu>
		<Menu.Item>This is a menu item.</Menu.Item>
		<Menu.Item>This is another menu item.</Menu.Item>
		<Menu.Menu>
			<Menu.Item>This is a submenu item.</Menu.Item>
			<Menu.Item>This is another submenu item.</Menu.Item>
		</Menu.Menu>
	</Menu>
)