emojikiss renderif is not firing after motion calls onrest

emojikiss.jsx

// https://github.com/diegohaz/arc/wiki/Atomic-Design
import React, { Component } from 'react'
import { Badge, IconButton, Heading, Paragraph, ParagraphHolder, PrimaryNavigation, Blockquote } from 'components'
import styled from 'styled-components'
import ReactDOM from 'react-dom'
import renderIf from 'render-if'
import {Motion, spring} from 'react-motion';
import glamorous from "glamorous";




const EmojiGlamor = glamorous.div(
  {
    position: 'absolute',
    pointerEvents: 'none',
    zIndex: '600'
  },
  ({top})=>({
    top: top
  }),
  ({left})=>({
    left: left
  }),
  ({font})=>({
    fontSize: font,
    width: font,
    height: font
  })
);

const styles = {
  clickthrough:{
    pointerEvents: 'none'
  }
}


class Heart extends Component{
  constructor(props){
    super(props);
    this.state = {
      emojikiss: false
    };
  }

  stopHeart(){
    console.log('inside stopHeart');
    this.props.heartDone();
  }

  componentDidMount(){
    console.log('inside heart container');
    console.log('waiting for 15 seconds');
    console.log('value of emojikiss is ', this.state.emojikiss);
  }

  heartStopper(){
    this.setState({
      emojikiss: true
    });
    // ,()=>{
    //   setTimeout(()=>{
    //     this.stopHeart();
    //   },15000)
    // })
  }




  render(){
     return (
       <div>
         <Motion
            defaultStyle={{ xValue: 450, yValue: 350, font: 0 }}
            style={{ xValue: 450, yValue: 350, font: spring(200, {stiffness: 1, damping: 1})}}
            onRest={()=>this.heartStopper()}
          >
            {style =>
              (
                <div>
                  <EmojiGlamor
                    top={`${style.xValue}px`}
                    left={`${style.yValue}px`}
                    font={`${style.font}px`}
                  >
                    &#128536;
                  </EmojiGlamor>
                </div>
              )
            }
          </Motion>
          {renderIf(this.state.emojikiss===true)(
            <div><p>hello there sailor</p></div>
          )}
       </div>
     );
  }
}

export default Heart