How to Target a Ref Inside a Function in React Component?

I’m working on a React component where I need to generate a PDF from a specific element referenced by a ref within a function. However, I’m encountering difficulties targeting the ref inside the function.
I’m using react-hook-form and I don’t want to use state to manage the field and therefore put the rendered content hidden in the form itself.
The main goal is to create a PDF from the element typed by the user in the form after submitting the form.

Here’s a simplified version of my component:

import { useRef } from 'react';
import generatePDF from 'react-to-pdf';

const MyComponent = () => {
  const targetRef = useRef(null);

  const defaultValues = {
    name: ''
  };
  
const methods = useForm({
    resolver: yupResolver(NewPatientSchema),
    defaultValues,
  });

  const {
    handleSubmit,
    formState: { isSubmitting },
  } = methods;

  const onSubmit = handleSubmit(async (data) => {

    const content = () => {
      return (
        <div ref={targetRef}>
          Content include {data.name}
        </div>
      )
    }

    generatePDF(targetRef, { filename: 'page.pdf' });
  };

  return (
    <FormProvider methods={methods} onSubmit={onSubmit}>
      <TextField name='name' label='Name'/>
      <button onClick={onSubmit}>Generate PDF</button>
    </FormProvider>
  );
};

export default MyComponent;

So far I get Unable to get the target element., I tried also to reference to content and not the ref and I get the same error.

(I tried react-pdf/renderer it does not render the images)

Thank you in advance