Controlled vs uncontrolled components

// @framerSupportedLayoutWidth any-prefer-fixed
// @framerSupportedLayoutHeight auto

import * as React from "react"
import { addPropertyControls, ControlType } from "framer"

type Props = {
  title?: string
  content?: string
  isOpen?: boolean
  onChange?: (next: boolean) => void
}

export default function AccordionItem({
  title = "Question",
  content = "Answer text goes here",
  isOpen,
  onChange,
}: Props) {
  const [internalOpen, setInternalOpen] = React.useState(false)
  const controlled = isOpen !== undefined
  const open = controlled ? isOpen : internalOpen

  function toggle() {
    const next = !open
    if (controlled) onChange?.(next)
    else setInternalOpen(next)
  }

  return (
    <divstyle={{ border:="" "1px="" solid="" #e5e5e5",="" borderradius:="" 8,="" overflow:="" "hidden",="" }}="">
      <buttononclick={toggle} style="{{" width:="" "100%",="" padding:="" "12px="" 16px",="" background:="" "#f8f8f8",="" fontsize:="" 16,="" textalign:="" "left",="" cursor:="" "pointer",="" border:="" "none",="" }}="">
        {title}
      
      {open && (
        <div style="{{" padding:="" "12px="" 16px",="" fontsize:="" 14,="" color:="" "#333"="" }}="">
          {content}
        </div>
      )}
    
  )
}

addPropertyControls(AccordionItem, {
  title: { type: ControlType.String, title: "Title", defaultValue: "Question" },
  content: {
    type: ControlType.String,
    title: "Content",
    defaultValue: "Answer text goes here",
  },
  isOpen: { type: ControlType.Boolean, title: "Is Open" },
})

</buttononclick={toggle}></divstyle={{

const controlled = prop !== undefined
const value = controlled ? prop : internalState