When I put my SignaturePad inside of an ant design component library Modal component, it is not able to generate the base64 image.

When the code reaches the trim function in the signaturepad, the signature will be "data:". But if I remove the Modal tags, it will return "data:image/png;base64,iVBORw0KGgoxxxxx...." which is the normal behaviour. Is this due to the signature library not working well in an ant design Modal?

Below is the code:

import { Form, Modal } from 'antd';

const FormComponent = () => {
  const [form] = Form.useForm();

  return (
      
        

          

            

               {
                  formSign.setFieldsValue({ [fieldName]: value });
                }}
                status={undefined}
                skipValidation={false}
              />
            
          
        
      
  );
);

import React, { useRef, RefObject } from 'react';
import SignaturePad from 'react-signature-canvas';
import { Button, Form } from 'antd';

interface SignaturePadProps {
  name: string;
  title: string;
  setFieldValue: (fieldName: string, value: any) => void;
  status?: 'error' | 'success';
  skipValidation?: boolean;
}

const SignaturePad: React.FC = ({
  name,
  title,
  setFieldValue,
  status,
  skipValidation,
}) => {
  const ref: RefObject = useRef(null);
  const isErrorBorder = status === 'error' ? 'signing-error-border' : '';

  const trim = () => {
    if (ref.current) {
      let sign = ref.current.toDataURL('image/png');
      setFieldValue(name, sign);
    }
  };

  const clear = () => {
    if (ref.current) {
      ref.current.clear();
      setFieldValue(name, '');
    }
  };

  return (
    
      

        
        
          Clear
        
      
    
  );
};

export default SignaturePad;