My React Native Animation Duration Isn't Working

Question

I have an animation in my login screen which is supposed to slide down the buttons when the sign in button is clicked and slide up the email and password input boxes at the same time, i have a duration of 2000 milliseconds but the positions change instantly instead of smoothly sliding.

The Animation is in a functional component, so to stop the animation from reverting back before i click to reverse it so i am using useState() to hold the position.( Previously before i was using useState(), when i changed the text in the input boxes, the animation would reset back to the original position)

Here is the Animation

  const [Buttons, setButtons] = useState(200);
  const [Input, setInput] = useState(800);
  const AnimatedButtons = new Animated.ValueXY({ x: 0, y: Buttons })
  const AnimatedInputs = new Animated.ValueXY({ x: 0, y: Input })

  const StartAnmation = () => {
  setButtons(800);
  Animated.timing(
  AnimatedButtons, {
  toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()

setInput(-100);
Animated.timing(AnimatedInputs, {
  toValue: { x: AnimatedInputs.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()
}

 const ReverseAnimation = () => {
 setButtons(200)
 Animated.timing(
  AnimatedButtons, {
  toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()

setInput(800)
Animated.timing(AnimatedInputs, {
  toValue: { x: AnimatedInputs.x, y: AnimatedInputs.y },
  duration: 2000,
  useNativeDriver: true,
}).start()
}

I have 2 button onPress() that call the animations and have 2 Views which change positions, The positions change alright but i doesnt slide out gradually , just instantly change

Thanks