Николай, привет! Несмотря на то, что ты все описал

Николай, привет! Несмотря на то, что ты все описал подробно, я тыкаю кодом компонента в разные места и довольно бездумно. 
Компонент:

const DropdownMenu: React.FC<DropdownMenuProps> = ({
    name,
    href,
    title,
    children,
    ...other
  }) => {
  
    /**
     * Здесь вся логика с citiesOpened, toggleMenuCities и т.п.
     */
  
     const [citiesOpened, citiesOpenedSetter] = useState(false)
  
     const toggleMenuCities = useCallback(() => {
       citiesOpenedSetter(!citiesOpened)
     }, [citiesOpened])
   
     useEffect(() => {
       if (!citiesOpened) {
         return
       }
   
       const closeCitiesOpenedEvent = () => {
         citiesOpenedSetter(false)
       }
   
       window.document.addEventListener('click', closeCitiesOpenedEvent)
   
       return () => {
         window.document.removeEventListener('click', closeCitiesOpenedEvent)
       }
     }, [citiesOpened])
   
     const citiesList = useMemo<JSX.Element | null>(() => {
       //const coordsUrl = ''
   
       const citiesList: JSX.Element[] = []
   
       cities.forEach((city) => {
         if (!city) {
           return
         }
   
         const { id, name, lat, lng, alias: uri } = city
   
         if (!lat || !lng) {
           return
         }
   
         const link = `/${uri}@` + [lat, lng, 12].join(',')
   
         citiesList.push(
           <li key={id}>
             <Link href={link}>
               <a
                 style={{
                   color: '#000',
                 }}
   
                 // onClick={closeMenu}
               >
                 {name}
               </a>
             </Link>
           </li>
         )
       })
   
  
    return <DropdownMenuStyled
      {...other}
    >
      <a
        href={href}
        title={title}
        onClick={toggleMenuCities}
      >
        {name} <i className="fa fa-angle-down"></i>
      </a>
      <DropdownMenuBoxStyled opened={citiesOpened}>
        {children}
      </DropdownMenuBoxStyled>
    </DropdownMenuStyled>
    },[])

Засунул его перед компонентом MainMenu - ругается, что export MainMenu не катит - можно только элемент верхнего уровня экспортировать, внутрь компонента MainMenu перенес - ошибка та же. Вообще вынести в отдельный файл всё это хозяйство надо?