fix: issue with accordion with single behaviour (#2361)

packages/components/src/components/accordion-item/accordion-item.lite.tsx

@@ -7,8 +7,9 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBAccordionItemProps, DBAccordionItemState } from './model';
-import { cls } from '../../utils';
+import { cls, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
+import { DEFAULT_ID } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true,
@@ -23,6 +24,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	const ref = useRef<HTMLDetailsElement>(null);
 	// jscpd:ignore-start
 	const state = useStore<DBAccordionItemState>({
+		_id: DEFAULT_ID,
 		_open: false,
 		toggle: (event: ClickEvent<HTMLElement>) => {
 			// We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
@@ -36,6 +38,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	});
 
 	onMount(() => {
+		state._id = props.id || 'accordion-item-' + uuid();
 		if (props.defaultOpen) {
 			state._open = props.defaultOpen;
 		}
@@ -45,7 +48,7 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 	return (
 		<details
 			ref={ref}
-			id={props.id}
+			id={state._id}
 			class={cls('db-accordion-item', props.className)}
 			aria-disabled={props.disabled}
 			open={state._open}