Приложение React иногда дает сбой при открытии react-signature-canvas

Извините, я не могу подробно рассказать о проблеме, так как это происходит только иногда, и я не смог воссоздать ее, а это значит, что я понятия не имею, с чего начать попытки ее исправить.

Похоже, это происходит только на действительно дешевых планшетах Android. У меня есть страница с формой, где пользователь заполняет детали. Проблема возникает сразу после того, как они ввели свое имя в текстовое поле, а затем, когда они нажимают на react-signature-canvas, чтобы начать рисовать свою подпись, приложение вылетает (не крашит все время). в прошлом, я думаю, сбой был вызван, когда клавиатура была еще открыта, когда пользователь пытался начать рисовать на панели для подписи.

Как я уже сказал, мне очень сложно это исправить, так как я не могу воссоздать его, поэтому любая помощь будет очень признательна. Я использую React Hooks и Formik.

Форма:

<h2>Guardian Full Name</h2>
            <MyTextField
              label="Guardian Full Name"
              name="parentName"
              required
            />
            <ErrorMessage
              component={"div"}
              className={"termsConditionText error"}
              name={"parentSignature"}
            />

            <SignaturePad setFieldValue={setFieldValue} />

Панель для подписи:

    import React, { useRef, useState } from "react";
import { Button } from "semantic-ui-react";
import "../../pages/SignDisclaimerForm/SignDisclaimerForm.css";
import "./signaturePad.css";
import SignatureCanvas from "react-signature-canvas";

export const SignaturePad = props => {
  const [canvasImageUrl, setCanvasImageUrl] = useState([
    props.parentSignature || ""
  ]);
  let sigCanvas = useRef();

  const clearCanvas = () => sigCanvas.current.clear();
  const saveCanvas = async () => {
    if (sigCanvas.current.isEmpty()) return;
    document.getElementById("parentName").blur();

    props.setFieldValue(
      "parentSignature",
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
    setCanvasImageUrl(
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
  };

  return (
    <div>
      {!props.disabled && (
        <div>
          <h2 style={{ marginLeft: "5%" }}>Guardian Signature</h2>
          <div className={"sigContainer"}>
            <SignatureCanvas
              ref={sigCanvas}
              canvasProps={{ className: "sigPad" }}
              onEnd={saveCanvas}
            />
          </div>
          <Button
            style={{ marginLeft: "5%", marginTop: "2%", marginRight: "2%" }}
            type={"button"}
            onClick={clearCanvas}
            children={"Clear"}
          />
          <br />
          <br />
        </div>
      )}

      {canvasImageUrl[0] && (
        <div className={"signatureDisplay"}>
          <img
            src={canvasImageUrl}
            alt={"Guardian Signature"}
            style={{ height: "100%", width: "100%" }}
          />
        </div>
      )}
    </div>
  );
};

Отчет о проблеме Sentry также ниже.

Название проблемы:

TypeError HTMLCanvasElement.r(src/helpers)
error
Cannot read property 'push' of undefined

Тело проблемы:

../../src/helpers.ts в HTMLCanvasElement.r в строке 85:17

 }
  // Attempt to invoke user-land function
  // NOTE: If you are a Sentry user, and you are seeing this stack frame, it
  //       means the sentry.javascript SDK caught an error invoking your application code. This
  //       is expected behavior and NOT indicative of a bug with sentry.javascript.
  return fn.apply(this, wrappedArguments);
  // tslint:enable:no-unsafe-any
} catch (ex) {
  ignoreNextOnError();
  withScope((scope: Scope) => {

Хлебные крошки:

Вот как выглядит форма: