How to run a seperate animation on hover

[wispyco]

I am not even quite sure what the controller is used for, I did find that someone else used the isPaused prop to run the animation and pause it, I can do that, but it is not the functinality I want, I was hoping the controller could help me with the functionality I want.

What I want to happen is have a second animation run when I hover(click anywhere for now instead) over the canvas element, ie a different animation than the first one. Here is my attempted code so far the controller does nothing for me anyways so need help understanding it.

import React from "react"
import Img from 'gatsby-image'
import styled from "styled-components"
import FlareComponent from 'flare-react';
import Layout from "../components/layout"


const LogoWrapper = styled.div`
  width:200px;
  height:200px;
`

class wispyController extends FlareComponent.Controller
{
    constructor()
    {
        super();
        this._Animate = null;
    }
 
    initialize(artboard)
    {
        this._Animate = artboard.getAnimation("Wispy Hover"); // This is my second animation
    }
 
    advance(artboard, elapsed)
    {

        const { _Animate: animate } = this;


        window.addEventListener('click', function() {
           animate.apply(5, artboard, 1.0);
        })
        

       
 
        // keep rendering
        return true;
    }
}



class IndexPage extends React.Component  {
  

  constructor()
  {
      super();
      this.state = { wispyController: new wispyController(), paused: false };
  }


  togglePause() {
    this.setState((prevState) => { return { paused: !prevState.paused } });
  }


  render(){
    const {data} = this.props;

    return(

      <Layout>
        
        <button onClick={() => this.togglePause()}>{this.state.paused ? 'Start' : 'Pause'}</button>

        <LogoWrapper>
          <FlareComponent width={200} height={200} animationName="Wispy Appear" isPaused={this.state.paused} controller={this.state.wispyController} file="/Wispy.flr"/>
        </LogoWrapper>



    {data.allSanityBlogPost.edges.map(({ node: post }) => (  
      <article key={post.id}>
        <h1>{post.name}</h1>
        <img src={post.imageGif.asset.url}/>
      </article>
    ))}


      </Layout>
    )

  }

}

export default IndexPage

export const query = graphql`
  query IndexQuery {
    allSanityBlogPost {
      edges {
        node {
          name
          id
          imageGif {
            asset {
              url
            }
          }
        }
      }
    }
  }
`

[wispyco]

I've updated my code a bit but now nothing runs it just loads the final state of one of the animations

class wispyController extends FlareComponent.Controller
{
    constructor()
    {
        super();
        this._Animate = null;
    }
 
    initialize(artboard)
    {
        this._Animate = artboard.getAnimation("WispyHover"); // This is my second animation
        this._Animate1 = artboard.getAnimation("Wispy Appear"); // This is my second animation
    }
 
    advance(artboard, elapsed)
    {

        const { _Animate: animate, _Animate1: animate1 } = this;


           animate.apply(animate.duration, artboard, 1.0); // I want this one to run on hover
           animate1.apply(animate1.duration, artboard, 1.0);
     
 
        // keep rendering
        return true;
    }
}