Building MonthPicker With React Hooks - Part 1

Motivation

I thought it can be interesting to make a post about - how i build a "month picker" util, by myself, using my little css/html/react knowledge and nothing else.
Searching through the web - i stumble upon this implementation of month picker, but after looking more deeply into the code i asked myself - is there some way to implement this functionality little more simplier-for-user?

Design

First step - lets think about how this monthpicker should look and how it should act.
Here is screencast of monthpicker in action:

Popup Menu

First thing to start with - i thought about "popup menu" - a dropdown menu which pops when user clicks the input

import React, {useState, useRef} from 'react';
const MonthPicker = () => {
   const [shown, setShown] = useState(false); 
   const elRef = useRef(null);
   const toggleMenu = () => {
      setShown(!shown);
   }

   return (
      <span className="month-menu-holder" ref={elRef}>
         
         <input onFocus={toggleMenu}/>
        
         {shown && <div className="month-menu-dropdown">
            <header>
               <div className="top-arrow"></div>
               <button><</button>
               <div className="year-holder">{'2019'}</div>
               <button>></button>
            </header>
            {/* here will come a days buttons */}
         </div>}
      </span>
   );
}

Currently - the "Thing" we created - just know how to make the drop menu to appear, but - that is a good start. Of course - most of the "tricks" of invisibility and positioning done by proper css:

.month-menu-holder {
    position: relative;
    display: inline-block;
}

.month-menu-dropdown {
    position: absolute;
    right: 0;
    top: 59px;
    min-width: 170px;
    ...
}