Component forgets starting point on drag

I was playing around with animejs and react-draggable on a pet project of mine when I ran into a bit of a problem. I have an animation that translates a child component along the Y axis. This animation is triggered whenever I click a button. On the first click, the component is moved down by an arbitrary figure. On the second click, the component's TOP should be inline with its parent's.

CHILD COMPONENT

import React, { useRef, useState } from 'react'
import animate from 'animejs'
import Draggable from 'react-draggable'
import utils from '../utils/index'

import ControlPanel from './player/controls/controlPanel'
import SongInfo from './player/song/songInfo'
import Header from './player//header/header'
import Footer from './player/footer/footer'
import ProgressBar from './player/progress/progressBar'

function Player({ getSpotifyPosition }) {
    const [active, setActive] = useState(true)
    const [color, setColor] = useState('#d4d4d4')
    const [top, setTop] = useState(0)

    const playerRef = useRef()
    const getPlayerPosition = utils.getCoordinates.bind(playerRef)


    const minimizePlayer = () => {
        setActive(!active)
        let {y: spot_y, height: spot_height} = getSpotifyPosition()
        let {y: play_y, height: play_height} = getPlayerPosition()



        let options = {
            targets: playerRef.current,
            easing: 'linear',
            duration: 350,
            translateY: active ? (700 - (play_y - spot_y)) : 0          
        }



        animate(options)




    }

    return (
        <Draggable axis='y' bounds={{ top: 0 }}>
            <div style={{ height: '100%' }}>
                <div
                    className='player'
                    ref={playerRef}
                    style={{ backgroundColor: color }}
                >
                    <Header minimizePlayer={minimizePlayer} />
                    <SongInfo setColor={setColor} />
                    <ProgressBar />
                    <ControlPanel />
                    <Footer />
                </div>
            </div>
        </Draggable>
    )
}

export default Player

This all works. The problem is whenever I drag the child component before triggering the first animation, it seems that the component forgets how to get back to its parent's top on the second animation. I figure I must be missing something very important and also quite obvious. How do I get the child component to show the behavior I want? Any help would be appreciated. Thank you in advance.