How to use the react-cosmos-shared2/fixtureState.getFixtureStatePropsInst function in react-cosmos-shared2

shouldComponentUpdate(nextProps) {
    const { children, fixtureState } = this.props;

    // Re-render if child type or props changed (eg. via webpack HMR)
    if (!isEqual(nextProps.children, children)) {
      return true;
    }

    if (nextProps.fixtureState === fixtureState) {
      return false;
    }

    const instanceId = getInstanceId(this);
    const next = getFixtureStatePropsInst(nextProps.fixtureState, instanceId);
    const prev = getFixtureStatePropsInst(fixtureState, instanceId);

    if (next === prev) {
      return false;
    }

    // Fixture state for this instance is populated on mount, so a transition
    // to an empty state means that this instance is expected to reset
    if (!next) {
      return true;
    }

    // If the fixture state for this instance has just been populated, we need
    // to compare its values against the default values, otherwise an additional
    // render cycle will be always run on init
    const prevKey = prev ? prev.renderKey : DEFAULT_RENDER_KEY;

componentDidUpdate(prevProps) {
    const { children, fixtureState } = this.props;
    const instanceId = getInstanceId(this);
    const propsInstance = getFixtureStatePropsInst(fixtureState, instanceId);

    // Reset fixture state if...
    if (
      // ...the fixture state associated with this instance (initially created
      // in componentDidMount) has been emptied deliberately. This is an edge
      // case that occurs when a user interacting with a fixture desires to
      // discard the current fixture state and load the fixture from scatch.
      !propsInstance ||
      // ...mocked props from fixture elemented changed, likely via webpack HMR.
      !isEqual(children.props, prevProps.children.props)
    ) {
      this.setFixtureState();
    }
  }

shouldComponentUpdate(nextProps) {
    const { children, fixtureState } = this.props;

    // Re-render if child type or props changed (eg. via webpack HMR)
    if (!isEqual(nextProps.children, children)) {
      return true;
    }

    if (nextProps.fixtureState === fixtureState) {
      return false;
    }

    const instanceId = getInstanceId(this);
    const next = getFixtureStatePropsInst(nextProps.fixtureState, instanceId);
    const prev = getFixtureStatePropsInst(fixtureState, instanceId);

    if (next === prev) {
      return false;
    }

    // Fixture state for this instance is populated on mount, so a transition
    // to an empty state means that this instance is expected to reset
    if (!next) {
      return true;
    }

    // If the fixture state for this instance has just been populated, we need
    // to compare its values against the default values, otherwise an additional
    // render cycle will be always run on init
    const prevKey = prev ? prev.renderKey : DEFAULT_RENDER_KEY;
    const prevValues = prev

render() {
    const { children, fixtureState } = this.props;
    const instanceId = getInstanceId(this);
    const propsInstance = getFixtureStatePropsInst(fixtureState, instanceId);

    // HACK alert: Editing React Element by hand
    // This is blasphemy, but there are two reasons why React.cloneElement
    // isn't ideal:
    //   1. Props need to overridden (not merged)
    //   2. element.key has to be set to control whether the previous instance
    //      should be reused on not
    // Also note that any previous key is irrelevant, as CaptureProps only
    // accepts a *single* React.Element as children.
    // Still, in case this method causes trouble in the future, both reasons
    // can be overcome in the following ways:
    //   1. Set original props that aren't present in fixture state to undefined
    //   2. Create a wrapper component or element and to set the key on
    // Useful links:
    //   - https://reactjs.org/docs/react-api.html#cloneelement
    //   - https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L293-L362