title: How to make an active link with history push in an react component?
body: <p>The code bellow is a menu, I want to make an active link when i click, set to bold for example how can i do that? </p>
  
  <pre><code>    const TopMenuItem: React.FC&lt;Props&gt; = (props) =&gt; {
          const { route } = props
          const { text, iconName } = menuItens[route.substring(1)] // Remove the '/' character
  
          function handleClick() {
              history.push(route)
          }
  
          return (
              &lt;div className={ `MenuItem-${text}` } style={ containerStyle } onClick={ handleClick }&gt;
                  &lt;Typography style={ {...fontStyle, fontWeight: 'bold'} }&gt;{ text }&lt;/Typography&gt;
                  &lt;Icon style={ arrowStyle }&gt;keyboard_arrow_right_outline&lt;/Icon&gt;
              &lt;/div&gt;
          )
      }
      export default TopMenuItem
  
      const containerStyle = {
          display: 'flex',
          alignItems: 'center',
          cursor: 'pointer',
      }
      const fontStyle = {
          fontSize: '1em',
          letterSpacing: '1px',
          color: 'black',
  </code></pre>