callbackRef.ts

export function useEmbeddedRef() {
  const [embedded, setEmbedded] = useState<EmbeddedRef | undefined>(null);

  const embeddedRef = useCallback((node: EmbeddedRef) => {
    if (node !== null) {
      setEmbedded(node);
    }
  }, []);
  return { embedded, embeddedRef };
}

example.tsx

/// usage

const UserTaskInstanceDetailsPage: React.FC<RouteComponentProps<MatchProps> &
  OUIAProps> = ({ ouiaId, ouiaSafe, ...props }) => {
  
  
  // ....
  // change the useRef for this, or use the hook
  const [embedded, setEmbedded] = useState<TaskDetailsApi | undefined>(null);

  const embeddedRef = useCallback((node: TaskDetailsApi) => {
    if (node !== null) {
      setEmbedded(node);
    }
  }, []);
  
  // access the methods on the `embedded` variable
  
  // ....
  
        <EmbeddedTaskDetails
          ref={embeddedRef}
          targetOrigin={window.location.origin}
          envelopePath={'/envelope/task-details.html'}
          task={userTask}
        />