web animations api, resetting 1st animation at end of chain

Question

I'm experimenting with the web animations API for the first time, and trying to chain some values together. I'm a little confused as for this simple animation, where it will translate 200px along the X axis, then 200px down along the Y axis once the first animation is complete.

However, at the end of the animation, it resets the X value of the initial animation. I've tried playing around with 'both' | 'forwards' for the fill mode property, as well as setting translateX to 0/200 in the second transform declaration. Feel like I'm missing something quite simple here.

const box = document.getElementById('box');
const animateRight = box.animate(
    [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
    {
        fill: 'forwards',
        easing: 'ease-in-out',
        duration: 2000,
    }
);
animateRight.finished.then(() => {
    box.animate([{ transform: 'translateY(0)' }, { transform: 'translateY(100px)' }], {
        composite: 'add',
        fill: 'both',
        duration: 1500,
    });
});

#box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
 }

<div id="box"></div>