Swipeable react component always starts from same [0.0] position

Question

I'm trying to develop a swipe component using React w/ Redux and hammerjs. The problem is that each time I move my component the position.x and position.y start from [0,0] and not from the current state they are at.

Here's the code:

import React, { useState, useEffect } from 'react';
import Hammer from 'hammerjs';
import WeatherForecast from './WeatherForecast';

const SwipeableCard = ({ children }) => {
  const [gesture, setGesture] = useState(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const element = document.getElementById('swipeable-card');
    const hammer = new Hammer(element);
    hammer.on('pan', (event) => {
      setPosition({
        x: event.deltaX + position.x,
        y: event.deltaY + position.y,
      });
    });

    setGesture(hammer);

    return () => {
      hammer.off('pan');
      setGesture(null);
    };
  }, []);

  return (
    <div
      id="swipeable-card"
      className="App-swipeable"
      style={{
        transform: `translate(${position.x}px, ${position.y}px)`,
      }}
    >
      <WeatherForecast />
    </div>
  );
};

export default SwipeableCard;