Figma Plugin API, How to add component properties to component

Question

I am trying to make a plugin that documents color styles but I am having trouble with settign up the color token card component. I figured out how to add a component property but I don't know how I can apply that to the textNode.

Does someone know how to do this?

Component creation

    // Create tile component
const cardTokenComponent = figma.createComponent();
cardTokenComponent.name = "Card Token";
cardTokenComponent.resize(206,176);

cardTokenComponent.addComponentProperty("TokenName", "TEXT", "");
cardTokenComponent.addComponentProperty("TokenColor", "TEXT", "");

const tokenNameNode = figma.createText();
tokenNameNode.characters = "";
cardTokenComponent.appendChild(tokenNameNode);


const tokenHexNode = figma.createText();
tokenHexNode.characters = "";
cardTokenComponent.appendChild(tokenHexNode);

For loop for creating an instance for each global color style:

for (const category in groupedStyles) {
  const categoryFrame = figma.createFrame();
  categoryFrame.layoutMode = "HORIZONTAL";
  categoryFrame.itemSpacing = 48;

  for (let i = 0; i < groupedStyles[category].length; i++) {
    const style = groupedStyles[category][i];

    // Create instance for each item
    const componentInstance = cardTokenComponent.createInstance();

    // Fill component properties
    componentInstance.setProperties({TokenName: style.name, TokenColor: style.color})

  }

  parentFrame.appendChild(categoryFrame);
}