JS/React Drawing Application with TouchMoveEvent

I am trying to build a react app and I need one component for simple handwriting and drawing on mobile/touch devices.
The problem im am facing is that the TouchMoveEvent is not fired upon small movements. Therefore it gets pretty hard if someone has a small handwriting. Sometimes some parts of letters or numbers are missing because the touchmoveevent was not fired and subsequently no line has been drawed.
Has anyone an idea how to lower the treshhold to fire the touchmoveevent or has someone a different approach to this? The goal is just a very simple mobile drawing app but the touchmoveevent is not sufficient for very detailed and small drawings as it is not fired upon small movements.

This is my code so far:

import React from "react";
const Immutable = require('immutable');
class DrawArea extends React.Component {
    constructor(sized) {
        super();

        this.state = {
            lines: new Immutable.List(),
            isDrawing: false
        };
        console.log(sized)
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
        this.handleMouseUp = this.handleMouseUp.bind(this);
        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);

    }

    componentDidMount() {
        document.addEventListener("mouseup", this.handleMouseUp);
        document.addEventListener("touchend", this.handleTouchEnd);

    }

    componentWillUnmount() {
        document.removeEventListener("mouseup", this.handleMouseUp);
        document.removeEventListener("touchend", this.handleTouchEnd);

    }

    handleMouseDown(mouseEvent) {
        if (mouseEvent.button != 0) {
            return;
        }

        const point = this.relativeCoordinatesForEvent(mouseEvent);

        this.setState(prevState => ({
            lines: prevState.lines.push(new Immutable.List([point])),
            isDrawing: true
        }));
    }

    handleMouseMove(mouseEvent) {
        if (!this.state.isDrawing) {
            return;
        }
        const point = this.relativeCoordinatesForEvent(mouseEvent);

        this.setState(prevState =>  ({
            lines: prevState.lines.updateIn([prevState.lines.size - 1], line => line.push(point))
        }));
    }

    handleMouseUp() {

        this.setState({  isDrawing: false });
    }

    handleTouchStart(e) {
        console.log("s")

        let touch = e.touches[0];
        const point = this.relativeCoordinatesForEvent(touch);
        this.setState(prevState => ({
            lines: prevState.lines.push(new Immutable.List([point])),
            isDrawing: true
        }));
    }
    handleTouchMove(e) {
        console.log("m")

        if (!this.state.isDrawing) {
            return;
        }
        let touch = e.touches[0];
        const point = this.relativeCoordinatesForEvent(touch)
        this.setState(prevState =>  ({
            lines: prevState.lines.updateIn([prevState.lines.size - 1], line => line.push(point))
        }));

    }
    handleTouchEnd() {
        console.log("e")
        this.setState({  isDrawing: false });

    }

    relativeCoordinatesForEvent(mouseEvent) {
        const boundingRect = this.refs.drawArea.getBoundingClientRect();
        return new Immutable.Map({
            x: mouseEvent.clientX - boundingRect.left,
            y: mouseEvent.clientY - boundingRect.top,
        });
    }

    relativeCoordinatesForTouchEvent(mouseEvent) {
        const boundingRect = this.refs.drawArea.getBoundingClientRect();
        return new Immutable.Map({
            x: mouseEvent.clientX - boundingRect.left,
            y: mouseEvent.clientY - boundingRect.top,
        });
    }

    render() {
        //console.log(this.state.lines)
        //this.state.lines.map(s => console.log(s))
        return (
            <div
                className="drawArea"
                ref="drawArea"
                onMouseDown={this.handleMouseDown}
                onMouseMove={this.handleMouseMove}
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouch
            >
                <Drawing sized={this.props.sized} lines={this.state.lines} />
            </div>
        );
    }
}

function Drawing({ lines, sized }) {
    return (
        <svg className="drawing">
            {lines.map((line, index) => (
                <DrawingLine key={index} sized={sized} line={line} />
            ))}
        </svg>
    );
}

function DrawingLine({ line, sized }) {
    let multi = sized ? 1.0 : 0.5;
    const pathData = "M " +
        line
            .map(p => {
                return `${p.get('x')*multi} ${p.get('y')*multi}`;
            })
            .join(" L ");

    return <path className="path" d={pathData} />;
}

export default DrawArea;
´´´