testcafe higher order selector

I am trying to create a higher order selector which I can reuse by changing a text parameter. In the snippet below, when I am trying to perform t.click using actualSelector, it's not working as expected. When I console log the value for the actualSelector, i see whole item values are printed.

Seems I am not using it right way. Can you please help me with this.

e.g

const testItemNameGenericSelector = (itemName) =>
    Selector(
      ".ms-Callout-container .ms-Callout-main  div div"
    )
  .withText(itemName);
...
  const itemNameToSelect = "Test Item-8ab1ec12-e719-4ab6-a0a3-ed538143d6d3";
  const actualSelector = testItemNameGenericSelector(itemNameToSelect)
...
  console.log(`selecting ${await actualSelector().textContent}`)

Below is full testcafe code for this test.

fixture`Getting Started`
  .page // declare the fixture
`https://hasans30.github.io/testpage/dropdown.html`; // specify the start page

//then create a test and place your code there
test("My first test", async (t) => {

   const testItemNameGenericSelector = (itemName) =>
    Selector(
      ".ms-Callout-container .ms-Callout-main  div div"
    )
  .withText(itemName);
  const buttonSelector = Selector('.ms-Button-label');
  const selectedValue = Selector('.ms-Dropdown-title');

  const itemNameToSelect = "Test Item-8ab1ec12-e719-4ab6-a0a3-ed538143d6d3";
  const actualSelector = testItemNameGenericSelector(itemNameToSelect);


  await t.click(buttonSelector,{speed:0.51})
  console.log(`selecting ${await actualSelector().textContent}`)

  await t.click(actualSelector,{speed:0.51})
  await t.expect(await selectedValue().textContent).eql(itemNameToSelect);

});