fix: add default `penColor` prop

[Lav39]

Summary

This PR addresses an issue where the penColor prop might be passed as undefined during parent component re-renders. This causes the underlying signature_pad library to set the fillColor as undefined, preventing any further drawing on the canvas. To resolve this, we are adding penColor as a default prop with a value of 'black'.

Changes

Added penColor to defaultProps with a default value of 'black'.

How to reproduce the issue

import React, { useRef, useCallback, useState } from "react";
import SignatureCanvas from "react-signature-canvas";

const App = (props) => {
  const { penColor } = props;
  const signaturePadRef = useRef();
  const [counter, setCounter] = useState(0);

  function clearPad() {
    signaturePadRef.current?.clear();
  }

  const onBegin = useCallback(() => {
    setCounter(counter + 1);
  }, []);

  const onEnd = useCallback(() => {
    setCounter(counter + 1);
  }, []);

  return (
    <div style={{ position: "relative", border: "1px solid" }}>
      <div onClick={clearPad}>Clear</div>
      <SignatureCanvas
        ref={signaturePadRef}
        onBegin={onBegin}
        onEnd={onEnd}
        canvasProps={{ style: { width: "100%", height: "100%" } }}
        penColor={undefined}
      />
    </div>
  );
};

export default App;

1. Run above code in a react sandbox.
2. Draw something and then click on Clear text and try to draw some again and it won't work.
3. If you comment out the penColor prop, you will not encounter the issue.