Get Value from React Component inside outer class

Question

Learning react so please bear with me.

Thank you to Coding Comics on their tutorial regarding a digital signature in react

https://www.youtube.com/watch?v=SeSo0gPFbtw

I was able to get this going inside a function on a test project, but when I tried to add to my actual project which is inside a class it was firing all sorts of errors. So I created the following component:

 import React, { useState, useRef, useEffect } from 'react';
import SignaturePad from 'react-signature-canvas'

export default function SignaturePadComponent() {

    const [sign, setSign] = useState()
    const [url, setUrl] = useState()
    
    const handleClear = () => {
      sign.clear()
    }
    
    const handleGenerate= () =>{
      setUrl(sign.getTrimmedCanvas().toDataURL('image/png'))
    }
    
    console.log(sign)

  return (
    
    <div>
        <div style={{border:"2px solid black", width:500, height:200}}>
        <SignaturePad
        canvasProps={{width: 500, height: 200, className: 'signCanvas'}}
        ref={data=>setSign(data)}
        />

        <button type="button" onClick={handleClear}>Clear</button>
        <button type="button"  onClick={handleGenerate}>Save</button>
        </div>

        <br/>
        <br/>
        <img src={url}/>
    </div>

and then inside my class I added:

class NewMember extends Component {
//all other code

//code to hit api end point
//so was thinking something like 
//@observable
 // signatureImg = SignaturePadComponent.url;

    <div style={{ padding: "30px" }}>
          <SignaturePadComponent/>
    </div>

and the digital signature displays and works as expected which is great. The issue I am having is I want to get the url value from the SignaturePadComponent inside the NewMember class so I can send the signature as an image to an api end point.

I was thinking of trying something like adding an id to the SgnaturePadComponent and then document.getElementById type of thing but this didnt work. like so this.signatureImg = SignaturePadComponent.url;

What do you recommend? Thank You