Can't switch back to 'main' menu from React's CSSTransitions

Question

Basically I have a sidebar activated with hover which has submenus activated with react-transition-group CSSTransition element. I'm able to access the submenu from the buttons but when I click on the button that is supposed to go back to the 'main' menu the screen goes blank. I don't see what I've missed. :/

Here's an overview of the code.

const [activeMenu, setActiveMenu] = React.useState('main')

return (

<>

<CSSTransition 
  in={activeMenu === 'main'}
  unmountOnExit
  timeout={500}
  classNames="menu-primary">
    <div className="menu">
        <button onClick={() => setActiveMenu('sub1')}>sub1</button>                    
    </div>
</CSSTransition>

<CSSTransition 
  in={activeMenu === 'sub1' || activeMenu === 'sub2'}
  unmountOnExit
  timeout={500}
  classNames="menu-secondary">
    <div className="menu">
        <button onClick={() => setActiveMenu('main')}></button>
    </div>
</CSSTransition>

</>

)

Answer 1

I fear that this snippet would give a compile error, because the React JSX snippets must be wrapped i.e. their can be only one outermost element.