Passing a Handlebars component output as a parameter to a helper

I'd like to use the output of a component as a parameter to my helper, but am not having much success.

My Ember template is something like this:

<td class="wrap">
  
</td>

and the helper:

import { helper } from '@ember/component/helper';
import { htmlSafe } from '@ember/string';

export function helperFunction (params) {
    if (!params) {
        return "";
    }

    var link = params[0];
    if (!link) {
        return  "";
    }

    var linkText = params[1];
    if (!linkText) {
        linkText = link;
    }

    return new htmlSafe('<a href="' + link + '">' + linkText + '</a>');
}

export default helper(helperFunction);

The two combined successfully generates:

<td class="wrap">
  <a href="http://stackoverflow.com">Visit</a>
</td>

Now I have a component (my-component.hbs) that outputs HTML with the following:

  <span class="red"></span>

This component works if it is referenced in the template like so: (renders <span class="red">alphabet</span> as expected).

But I am stumped trying to get the HTML output into the second parameter of generate-url to produce:

<td class="wrap">
  <a href="http://stackoverflow.com"><span class="red">alphabet</span></a>
</td>

I have tried naively , but that outputs errors when that particular Handlebar is evaluated.