How to render repeatedly a react component till I find some specific object?

Question

I am working on @inlet/react-pixi. I have a React component that will eventually resolve to a Pixi Graphics object.

import React, { useCallback } from 'react';
import { Graphics } from '@inlet/react-pixi';

function Rectangle(props) {
  const draw = useCallback((g) => {
    g.clear();
    g.beginFill(props.color);
    g.drawRect(props.x, props.y, props.width, props.height);
    g.endFill();
  }, [props]);

  return <Graphics draw={draw} />;
}

The Rectangle component on render will give a Graphics component which on render will give a Graphics object as shown below.

import { Graphics as PixiGraphics } from 'pixi.js'
import { applyDefaultProps } from '../utils/props'
import invariant from '../utils/invariant'

const Graphics = (root, { geometry }) => {
  invariant(!geometry || geometry instanceof PixiGraphics, `Graphics geometry needs to be a \`PIXI.Graphics\``)
  const g = geometry ? new PixiGraphics(geometry.geometry) : new PixiGraphics()
  g.applyProps = (instance, oldProps, newProps) => {
    const { draw, geometry, ...props } = newProps
    let changed = applyDefaultProps(instance, oldProps, props)
    if (oldProps.draw !== draw && typeof draw === 'function') {
      changed = true
      draw.call(g, g)
    }

    return changed
  }

  return g
}

export default Graphics

My question is given any arbitrary component c passed to a function f, how do I keep rendering it till I get a g object?

function f(c) {
  // expected code
  let obj = render(c)
  while (!Graphics.prototype.isPrototypeOf(obj) {
    obj = render(obj);
  }
  return obj;
}