Создать выпадающий список при наведении курсора в Reactjs

Question

Я пытаюсь воспроизвести раскрывающееся меню https://www.naturolab.fr/ с левой стороны в качестве упражнения css. Как мне это сделать в Reactjs?

Пока у меня есть следующий код:

import React, { Component } from 'react';
import { Image } from 'semantic-ui-react'

class SideBar extends Component {
    render() {
        return(
    <header className="main-header">
        <div className="main-header-frame">
            <div className="header-wrapper">
                <Image size="tiny" src="./images/Logo.png" />
                <div className="logo">TEXT</div>
                <nav className="main-navigation-container">
                    <ul className="main-navigation">
                        <li>
                            <a>Test1</a>
                            <ul>
<li>t1</li>
<li>t2</li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
            )
    }
};

export default SideBar;

Вот мой CSS:

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700i');

body, html {
    background-color: #e2e2e2 !important;   
}
.main-header {
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 21.4rem !important;
    height: 100%;
    z-index:4;
    background-color:  white;
    background-repeat: repeat;
    transition: left .3s ease-out;
    box-shadow: 0 0 45px rgba(0,0,0,0.5);   
}
.main-header-frame {
    height: 100%;   
    /*border: 1px solid green;*/
}
.header-wrapper {
    padding: 30px 0px 30px;
    margin-left: 28%;
    /*border: 1px solid red;*/
}
.logo {
    text-align: center;
    margin-bottom: 30px;
    margin-left: -9rem !important;
    opacity: 1;
    font-size: 24px;
    font-family: 'Merriweather', sans-serif;
}

Мне нужно как-нибудь получить анимацию коллапса?