Slider moves a small distance on circular track for milliseconds and then come back to it's first state

[sudhanshu6247]

I am using this code for circular slider, when I move the slider, it moves a very small distance on circular track and then come back to it's original state from where it's started hence value is also not getting changed. code is same

    import React,{Component} from 'react'
    import {PanResponder,View} from 'react-native'
    import Svg,{Path,Circle,G,Text} from 'react-native-svg'
    
    class CircularSlider extends Component {
      constructor(props){
        super(props)
        this.handlePanResponderMove = this.handlePanResponderMove.bind(this)
        this.cartesianToPolar = this.cartesianToPolar.bind(this)
        this.polarToCartesian = this.polarToCartesian.bind(this)
        const {width,height} = props
        const smallestSide = (Math.min(width,height))
        this.state = {
          cx: width/2,
          cy: height/2,
          r: (smallestSide/2)*0.85
        }
      }
      componentWillMount = () => {
        this._panResponder = PanResponder.create({
          onStartShouldSetPanResponder: () => true,
          onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
          onMoveShouldSetPanResponder: () => true,
          onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
          onPanResponderMove: this.handlePanResponderMove
        })
      }
      polarToCartesian(angle){
        const {cx,cy,r} = this.state
            , a = (angle-270) * Math.PI / 180.0
            , x = cx + (r * Math.cos(a))
            , y = cy + (r * Math.sin(a))
        return {x,y}
      }
      cartesianToPolar(x,y){
        const {cx,cy} = this.state
        return Math.round((Math.atan((y-cy)/(x-cx)))/(Math.PI/180)+((x>cx) ? 270 : 90))
      }
      handlePanResponderMove({nativeEvent:{locationX,locationY}}){
        console.log("real time change in value",locationX,locationY,this.cartesianToPolar(locationX,locationY));
        this.props.onValueChange(this.cartesianToPolar(locationX,locationY))
      }
      render(){
        const {width,height,value,meterColor,textColor,onValueChange} = this.props
            , {cx,cy,r} = this.state
            , startCoord = this.polarToCartesian(0)
            , endCoord = this.polarToCartesian(value)
        console.log("printing value",value);
        console.log("printing d value",`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`);
        return (
          <Svg onLayout={this.onLayout} width={width} height={height}>
            <Circle cx={cx} cy={cy} r={r} stroke='#eee' strokeWidth={0.5} fill='none'/>
            <Path stroke={meterColor} strokeWidth={5} fill='none'
              d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}/>
            <G x={endCoord.x-7.5} y={endCoord.y-7.5}>
              <Circle cx={7.5} cy={7.5} r={10} fill={meterColor} {...this._panResponder.panHandlers}/>
              <Text key={value+''} x={7.5} y={1} fontSize={10} fill={textColor} textAnchor="middle">{value+''}</Text>
            </G>
          </Svg>
        )
      }
    }
   
    export default CircularSlider

component:

      <CircularSlider width={200} height={200} meterColor='#0cd' textColor='#fff'
                value={this.state.slider1} onValueChange={(val)=>{console.log("changing the state",val); 
    this.setState({slider1:val});}}/>

"react-native-svg": "^5.1.7", "react-native": "^0.43.4",

Please help.