Hey!

I have a goal where I want to be able to have buttons in the AccordionTrigger to recive a certain UI (see image)..

In the future would I like to be able to add buttongroup as well. But now I get this error:

In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.

accordion.tsx:35 <button> cannot contain a nested <button>.
See this log for the ancestor stack trace.

I have tried add

asChild

on AccordionTrigger, and the Button component.

Putting asChild on the AccordionTrigger weren´t a success 😅
This is my code:

          <Accordion type="single" collapsible className="w-full border rounded-md " defaultValue="item-1">
            {fields.map((field, index) => (
              <AccordionItem key={field.id} value={field.id}>
                <AccordionTrigger className="px-4 py-1 hover:no-underline cursor-pointer flex items-center">
                  {watchedSteps?.[index]?.title || `Step ${index + 1}`}
                  <Button
                    variant="ghost"
                    size="icon"
                    className="ml-auto"
                    onClick={(e) => {
                      e.stopPropagation();
                      removeStep(index);
                    }}
                    aria-label={`Remove step ${index + 1}`}
                  >
                    <Trash2 />
                  </Button>
                </AccordionTrigger>

                <AccordionContent>
                  <ProcessStepEdit key={`${field.id}.step${index}`} index={index} />
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>

The goal to have my button with trashcan in AccordionTrigger