How can I toggle menus in Fabric UI/Fluent UI/React

[MikhailPodolski]

I am extremely new to React/Fluent UI and not sure how to approach this concept. No matter what I do, I cannot apply a simple click to any of the menus.

For starters, we have a menu and a main panel

Here is the code for the menu

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styles from './TopMenu.module.scss';
import { ITopMenuProps } from './ITopMenuProps';
import { TopMenuBar } from '../TopMenuBar';
import { Icon } from 'office-ui-fabric-react/lib/Icon';

const MyIcon = () => <Icon iconName="SkypeCircleCheck" />;

export class TopMenu extends React.Component<ITopMenuProps> {
    public state = {
        mainMenu: [
            {
                id: 1,
                title: 'One',
                section: 'creation',
                completed: false
            },
            {
                id: 2,
                title: 'Two',
                section: 'creation',
                completed: false
            },
            {
                id: 3,
                title: 'Three',
                section: 'creation',
                completed: false
            },
            {
                id: 16,
                title: 'four',
                section: 'web',
                completed: false
            }
        ]
    };
    
    public render(): React.ReactElement<ITopMenuProps> {
        return (
            <TopMenuBar
                mainMenu={this.state.mainMenu}
                phase={this.props.phase}/>
        );
    }
}

Here is our main page that comes up

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styles from './EventsTemplate.module.scss';
import { IEventsTemplateProps } from './IEventsTemplateProps';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { TopMenu } from '../TopMenu';

const MyIcon = () => <Icon iconName="CompassNW" />;

export class EventsTemplate extends React.Component<IEventsTemplateProps> {

    public render(): React.ReactElement<IEventsTemplateProps> {
        return (
            <div>
                <div className={ styles.leftSidePanel }>
                    <button className={ styles.leftSidePanelButton }><Icon iconName="GridViewMedium" /></button>
                    <button className={ styles.leftSidePanelButton }><Icon iconName="Add" /></button>
                    <button className={ styles.leftSidePanelBottomButton }><Icon iconName="Back" /></button>
                </div>
                <div className={ styles.topPanel }>
                    <div className={ styles.title }>{ this.props.title }</div>
                    <TopMenu phase='creation'/>
                </div>
                <div className={ styles.mainPanel }>This is the main panel ***</div>
            </div>
        );
    }

}

At this point I am still struggling to understand how, using the above code, toggle between different panels, using the menu above?

Is there a simple approach to it using the Fabric UI/React/Fluent UI?

Thank you every one in advance