Styled-компоненты style не обновляются, если компоненты вложены

Question

Styled-компоненты не обновляются, если компоненты вложены.

Например.

【НЕ ОБНОВЛЯЕТСЯ!!!!】

class Hoge extends Component{
  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
    this.handleToggleActive = this.handleToggleActive.bind(this)
  }
  handleToggleActive(){
    const {active} = this.state;

    this.setState({active: !active})
  }
  render(){
    const {active} = this.state;
    return <Fuga {...{active}} onClick={this.handleToggleActive} />
  }
}

class Fuga extends Component{
  constructor(props) {
    super(props)
    this.state = {...this.props}
  }
  componentWillReceiveProps(nextProps){
    const {active} = nextProps;
    this.setState({active})
  }
  render(){
    const {active} = this.state;
    return <FF {...{active}} />
  }

}

const FF = styled.div`
  width: 100px;
  height: 100px;
  background: ${p => p.active ? 'red' : 'gray'};
`

В этом случае компонент стиля FF не обновляется, если я щелкаю компонент Hoge.

Если не вкладывать, Styled-компонент корректно обновляется, если я нажимаю Hoge Component;

Update правильно обновлять!!!!

class Hoge extends Component{
  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
    this.handleToggleActive = this.handleToggleActive.bind(this)
  }
  handleToggleActive(){
    const {active} = this.state;

    this.setState({active: !active})
  }
  render(){
    const {active} = this.state;
    return <FF {...{active}} onClick={this.handleToggleActive} />
  }
}

const FF = styled.div`
  width: 100px;
  height: 100px;
  background: ${p => p.active ? 'red' : 'gray'};
`

Почему это происходит? И, пожалуйста, скажите мне, как обновить компонент styled в случае, если компонент вложен.

Спасибо.