Animating React with GreenSock

Header.css

.Header {
  height: 50px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid black;
  color: white;
  text-transform: uppercase;
  background-color: rebeccapurple;
}
.isLoaded {
  background-color: red;
}

Header.jsx

import React, { Component } from 'react'
// import {findDOMNode} from 'react-dom'
import { TweenMax } from 'gsap'

import './Header.css'

class Header extends Component {

    state = {
        isLoaded: false,
        isExpanded: false
    }

    componentDidMount() {

    }

    expand(el){
        TweenMax.to(el, .5, {height: '100vh'})
    }

    shrink(el){
        TweenMax.to(el, 1, {height: '10vh'})
    }

    fadeIn(el) {
        TweenMax.to(el, .5, {autoAlpha: 1})
    }

    slideFromLeft(el){
        TweenMax.from(el, 0.5, {x: -100})
    }

    handleClick(el) {
        this.setState({isExpanded: !this.state.isExpanded})

        this.state.isExpanded ?
        this.shrink(this.headerRef) :
        this.expand(this.headerRef)
    }

    render () {
        return (
            <div className={`Header ${this.state.isLoaded ? 'isLoaded' : ''}`}
                ref={node => {this.headerRef = node}}
                onClick={this.handleClick.bind(this)}
                >
            </div>
        )
    }
}

export default Header