Adding a button inside accordionTrigger

[Steveb599]

I have an accordion with accordionTrigger which acts as a button. I want to add inside a button which removes the same accordion. but I get an error

Warning: In HTML, cannot be a descendant of .
This will cause a hydration error.

the code:

        <Accordion collapsible="true" type="multiple" className="space-y-4">
          {fields.map((exercise, index) => (
            <AccordionItem
              key={exercise.id}
              value={exercise.id}
              className="overflow-hidden rounded-lg border"
            >
              <AccordionTrigger className="bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100">
                <div className="flex w-full items-center justify-between">
                  <span className="text-lg font-semibold hover:underline">
                    {exercise.exerciseDetails.name||
                      `Exercise ${index + 1}`}
                  </span>
                  <div className="mr-4 flex items-center">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => remove(index)}
                      className="text-red-500 transition-colors hover:text-red-700 hover:underline"
                    >
                      <FiTrash />
                      <span className="mr-2">Remove</span>
                    </Button>
                  </div>
                </div>
              </AccordionTrigger>

How can I work around it? I do want to have a remove button, i tried to move it outside the accordiontrigger but the UI doesn't look good. only things that works is making the button of remove a span and adding onClick, but isn't it bad for accessibility and screen readers? I tried adding asChild for the accordionTrigger and it threw an error that react must have only one child.

[PanThomas]

<AccordionTrigger className="bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100">
  <div className="flex w-full items-center justify-between"> <span className="text-lg font-semibold hover:underline">
      {exercise.exerciseDetails.name|| Exercise ${index + 1}}
    </span>
    <div className="mr-4 flex items-center">
      <FiTrash 
         onClick={(e)=> { 
         e.stopPropagation()
         remove(index) 
         }} /> 
          <span className="mr-2">Remove</span>
    </div>
  </div>
</AccordionTrigger>

[Steveb599]

yea, is it okay for accessibility that its a span but acts as a remove? the onClick is only on the FiTrash btw..so clicking on remove won't do anything