Custom Accordion Item component doesn't open

[JasperAlexander]

Is it possible to make a custom Accordion Item component which opens when you click on the trigger? With the following code the item doesn't open.

<Accordion.Root type='multiple'>
    <AccordionItem>
      <Accordion.Header>
        <Accordion.Trigger>Trigger</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>Content</Accordion.Content>
    </AccordionItem>
</Accordion.Root>

AccordionItem.tsx

import * as Accordion from '@radix-ui/react-accordion'
import { FC, ReactNode } from 'react'

interface Props {
    children: ReactNode
    key: string
}

export const AccordionItem: FC<Props> = ({
    children,
    key
}) => {
    return (
        <Accordion.Item value={key}>
            {children}
        </Accordion.Item>
    )
}

[andy-hook]

@JasperAlexander key is a reserved prop in React, you should rename and pass it.

import * as Accordion from '@radix-ui/react-accordion'
import { FC, ReactNode } from 'react'

interface Props {
    children: ReactNode
    value: string
}

export const AccordionItem: FC<Props> = ({
    children,
    value
}) => {
    return (
        <Accordion.Item value={value}>
            {children}
        </Accordion.Item>
    )
}

<Accordion.Root type='multiple'>
    <AccordionItem value="item-1">
      <Accordion.Header>
        <Accordion.Trigger>Trigger</Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content>Content</Accordion.Content>
    </AccordionItem>
</Accordion.Root>