title: How to use SignaturePad with React TypeScript
body: <p>I'm trying to implement the SignaturePad in my react project and I can draw the signature, but I can't access the properties in order to clear it or save it. I get the error below on the ref={signCanvas} and also the current.clear() and signCanvas.current.clear() and signCanvas.getTrimmedCanvas().toDataURL(&quot;image/png&quot;)</p>
  <p>No overload matches this call.</p>
  <pre><code>  Overload 1 of 2, '(props: Readonly&lt;ReactSignatureCanvasProps&gt;): ReactSignatureCanvas', gave the following error.
      Type 'MutableRefObject&lt;{}&gt;' is not assignable to type 'string | ((instance: ReactSignatureCanvas | null) =&gt; void) | RefObject&lt;ReactSignatureCanvas&gt; | null | undefined'.
        Type 'MutableRefObject&lt;{}&gt;' is not assignable to type 'RefObject&lt;ReactSignatureCanvas&gt;'.
          Types of property 'current' are incompatible.
            Type '{}' is missing the following properties from type 'ReactSignatureCanvas': on, off, clear, isEmpty, and 14 more.
    Overload 2 of 2, '(props: ReactSignatureCanvasProps, context?: any): ReactSignatureCanvas', gave the following error.
      Type 'MutableRefObject&lt;{}&gt;' is not assignable to type 'string | ((instance: ReactSignatureCanvas | null) =&gt; void) | RefObject&lt;ReactSignatureCanvas&gt; | null | undefined'.
        Type 'MutableRefObject&lt;{}&gt;' is not assignable to type 'RefObject&lt;ReactSignatureCanvas&gt;'.ts(2769)
  index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;ReactSignatureCanvas&gt; &amp; Readonly&lt;ReactSignatureCanvasProps&gt; &amp; Readonly&lt;...&gt;'
  index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;ReactSignatureCanvas&gt; &amp; Readonly&lt;ReactSignatureCanvasProps&gt; &amp; Readonly&lt;...&gt;'*
  </code></pre>
  <p>This is what I have implemented so far, Any help would be greatly appreaciated.</p>
  <pre><code>const signCanvas = useRef({});
  
  const clear = () =&gt; signCanvas.current.clear();
  const save = () =&gt; console.log(signCanvas.getTrimmedCanvas().toDataURL(&quot;image/png&quot;));
  
  &lt;SignaturePad
   ref={signCanvas}
   canvasProps={{ className: &quot;signature__canvas&quot; }}
  /&gt;
  
  &lt;Button color='grey' content='Clear' onClick={clear} /&gt;
  &lt;Button color='grey' content='Save' onClick={save} /&gt;
  </code></pre>