How to make style API or style prop work out of the box?

[erikdemarco]

what i want to do is very simple. I want to make accordion title bold.

when I tried using style api and style prop it doesnt work:

function Demo() {
  // See groceries data above
  const items = groceries.map((item) => (
    <Accordion.Item key={item.value} value={item.value}>
      <Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion defaultValue="Apples" styles={{
        itemTitle	: { fontWeight: 700 }
      }} >
      {items}
    </Accordion>
  );
}

function Demo2() {
  // See groceries data above
  const items = groceries.map((item) => (
    <Accordion.Item key={item.value} value={item.value}  fw={700}>
      <Accordion.Control icon={item.emoji}>{item.value}</Accordion.Control>
      <Accordion.Panel>{item.description}</Accordion.Panel>
    </Accordion.Item>
  ));

  return (
    <Accordion defaultValue="Apples >
      {items}
    </Accordion>
  );
}

[rtivital]

https://codesandbox.io/p/sandbox/mantine-react-template-forked-rry2rs