Children prop — components as data

What does this output?

// Simulates React's children prop pattern
function Card({ title, children }) {
  return [Card: ${title}] ${children};
}

function Button({ onClick, children }) {
  return [Btn: ${children}];
}

// Composition — Card wraps Button
const result = Card({
  title: 'Actions',
  children: Button({ children: 'Submit' }) + ' ' + Button({ children: 'Cancel' })
});

console.log(result);

// HOC composes by wrapping
function withBorder(Component) {
  return (props) => |${Component(props)}|;
}

const BorderedCard = withBorder(Card);
console.log(BorderedCard({ title: 'Box', children: 'content' }));

Correct Output

[Card: Actions] [Btn: Submit] [Btn: Cancel]
|[Card: Box] content|

Why this output?