Symony: Render a form for each element - forms

Question

I'm trying to render an edit form in a modal for each element on the same page I create them, but it seems not possible to render a same form multiple times.
This is my controller:
/**
* #Route("/outcome", name="outcome")
*/
public function index(OutcomeRepository $repo, Request $request, EntityManagerInterface $manager): Response
{
$outcomes = $repo->findAll();
$outcome = new Outcome();
$form = $this->createForm(OutcomeType::class, $outcome);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$manager->persist($outcome);
$manager->flush();
$this->addFlash(
'success',
"Income <strong>{$outcome->getTitle()}</strong> has been added."
);
return $this->redirectToRoute('outcome');
}
return $this->render('outcome/outcome.html.twig', [
'outcomes' => $outcomes,
'form' => $form->createView(),
]);
}
This is the OutcomeType:
class OutcomeType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'label' => "Title",
'attr' => [
'placeholder' => "Write a title"
]
])
->add('amount', MoneyType::class, [
'label' => "Amount",
'attr' => [
'placeholder' => "Write an amount"
]
])
->add('save', SubmitType::class, [
'label' => 'Send',
'attr' => [
'class' => 'btn btn-primary'
]
]);
}
And this is the twig part:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newOutcomeModal">
New outcome
</button>
<div class="modal fade" id="newOutcomeModal" tabindex="-1" aria-labelledby="newOutcomeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newOutcomeModal">Add a new outcome</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{form_start(form)}}
{{form_widget(form)}}
{{form_end(form)}}
</div>
</div>
</div>
</div>
{% for outcome in outcomes %}
<div class="card m-4">
<div class="card-body">
<h5 class="card-title">{{outcome.title}}</h5>
<p class="card-text">{{outcome.amount}}</p>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#editOutcomeModal{{outcome.id}}">Edit</button>
</div>
</div>
<div class="modal fade" id="editOutcomeModal{{outcome.id}}" tabindex="-1" aria-labelledby="editOutcomeModal{{outcome.id}}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editOutcomeModal{{outcome.id}}">Edit {{outcome.title}} outcome</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{form_start(form)}}
{{form_widget(form)}}
{{form_end(form)}}
</div>
</div>
</div>
</div>
{% endfor %}
I get the error: "An exception has been thrown during the rendering of a template ("Field "outcome" has already been rendered, save the result of previous render call to a variable and output that instead.")."
I don't know how to solve this. I tried to turn the fields of OutcomeType in a collectionType but it didn't work.
Can someone help me please ?