SVG separately animation

Question

i am trying to code an Analog Clock using React Native, React Native SVG. this must be set by hand. i don't want to code dynamic clock. (There are tons of them on the internet.) i want to code just a static Analog Clock. i must controll hour hand and minute hand by hand (dragging). hour hand and minute hand must be connected each other. when i drag and rotate the minute hand 360 degree, hour hand have to turn 1 hour too.

you see the code under...

import React, { useRef, useState } from 'react';
import { Animated, PanResponder, StyleSheet, View, Text } from 'react-native';
import Svg, { Circle, Line } from 'react-native-svg';

/*
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
*/
var width = 400;
var height = 400;

const DraggableView = () => {

  const ALine = () => {
    return(
    <View >
      <Line    {...panResponder.panHandlers}
        x1={0}
        y1={0}
        x2={80}
        y2={80}
        stroke="red"
        strokeWidth="10"
        transform={Aci}
        />
    </View>)
};

  const AnimatedLine = Animated.createAnimatedComponent(ALine);

  const [X, SetX] = useState(0);
  const [Y, SetY] = useState(0);
  const [Aci, SetAci] = useState("");

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gesture) => {

      console.log(Math.atan(gesture.dy / gesture.dx) * (180 / Math.PI));
      //SetX(gesture.moveX);
      //SetY(gesture.moveY);

      SetAci("rotate(" + Math.atan(gesture.dy / gesture.dx) * (180 / Math.PI) + ")");
    },
    onPanResponderRelease: () => {

    },
  });

  return (
    <View style={styles.container}>

      <Svg height={height} width={width} position="relative" viewBox="-200 -200 400 400" style={{ backgroundColor: "lightgray" }}>
        <Circle r={180} cx={0} cy={0} fill="white" stroke="green" strokeWidth="3" />
            <AnimatedLine    />
            <Line
              x1={0}
              y1={0}
              x2={150}
              y2={50}
              stroke="blue"
              strokeWidth="8"
              transform="rotate(45)"
            />
        <Circle r={10} cx={0} cy={0} stroke="black" fill="black" strokeWidth="3" />
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    backgroundColor: '#61dafb',
    borderRadius: 4,
  },
});

export default DraggableView;

clock interface

(this will be an app for kids and it must be controlled by hand)