I am creating a form in symfony + turbo however when an error occurs in the form it returns status 422 which is Unprocessable Content.

There is nothing wrong with that however in the console it then gives me error 422 which stops my JS. In a way the form is dependent on JS - how to deal with it?

#[Route('/', name: 'overview')]
    public function app_panel_keys_overview(Request $request): Response  
    {
        $newKeyForm = $this->createForm(NewPublicKeyType::class);
        $newKeyForm->handleRequest($request);

        if ($newKeyForm->isSubmitted() && $newKeyForm->isValid()) {
            $keyType = $newKeyForm->get('keyType')->getData();
            $name = $newKeyForm->get('name')->getData();
            $description = $newKeyForm->get('description')->getData();
            $allowedIpAddresses = $newKeyForm->get('allowedIpAddresses')->getData();

            $this->tokenService->createNewPublicKey($this->getUser(), $keyType, $name, $allowedIpAddresses, $description);
        }

        if ($newKeyForm->isSubmitted() && !$newKeyForm->isValid()) {
            $request->setRequestFormat(TurboBundle::STREAM_FORMAT);
            return $this->renderBlock('panel/keys/overview.html.twig', 'form', ['newKeyForm' => $newKeyForm]);
        }
        
        return $this->render('panel/keys/overview.html.twig', [
            'newKeyForm' => $newKeyForm
        ]);
    }

<twig:Modal id="addNewKey" placement="right" toggle="false" title="" form="true" description="">
        <turbo-frame id="form_newKey">
            {{ form(newKeyForm) }}
        </turbo-frame>
    </twig:Modal>

{% block form %}
    <turbo-stream action="update" targets="#form_newKey">
        <template>
            {{ form(newKeyForm) }}
        </template>
    </turbo-stream>
{% endblock %}

I would like to get rid of 422 status code or get my js work after 422.