I have devise installed as authentication system in my Rails 7 app. I want to be able to create dynamic forms for organization and individual user types using hotwire. That is, when I click on individual option, a number of form fields should be displayed while others are hidden. I should be able to do this both on new and edit registration pages.

Since I am attempting to use hotwire to make this work, I have the a navigate stimulus controller

navigate_controller.js

import { Controller } from "@hotwired/stimulus";

/*
 * Usage
 * =====
 *
 * add data-controller="navigate" to the turbo frame you want to navigate
 *
 * Action (add to radio input):
 * data-action="change->navigate#to"
 * data-url="/new?input=yes"
 *
 */
export default class extends Controller {
  to(e) {
    e.preventDefault();

    const { url } = e.target.dataset;

    this.element.src = url;
  }
}

In my signup page, I have a conditional statement that wraps the organization fields and also turbo frame tag which points to the navigate controller.

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <%= turbo_frame_tag "account_types", data: { controller: "navigate" } do %>

    <div class="form-check form-check-inline">
      <%= f.label :account_type, value: 'individual', class: 'form-check form-check-inline' do %>
        <%= f.radio_button :account_type, 'individual', class: 'form-check-input', data: { action: "change->navigate#to", url: new_account_registration_path({ account: { account_type: "individual" } }) } %>
        <label class="form-check-label">Individual</label>
      <% end %>

      <%= f.label :account_type, value: 'organization', class: 'form-check form-check-inline' do %>
        <%= f.radio_button :account_type, 'organization', class: 'form-check-input', data: { action: "change->navigate#to", url: new_account_registration_path({ account: { account_type: "company" } }) } %>
        <label class="form-check-label">Organization</label>
      <% end %>
    </div>

    <% if @account.organization? %>

      <div class="field">
        <%= f.label :organization_name %><br />
        <%= f.text_field :organization_name, autocomplete: "Organization name" %>
      </div>

      <div class="form-check form-check-inline">
        Organization Type
        <%= f.label :organization_type, value: 'base', class: 'form-check form-check-inline' do %>
          <%= f.radio_button :organization_type, 'base', class: 'form-check-input' %>
          <label class="form-check-label">Base</label>
        <% end %>

        <%= f.label :organization_type, value: 'ministry', class: 'form-check form-check-inline' do %>
          <%= f.radio_button :organization_type, 'ministry', class: 'form-check-input' %>
          <label class="form-check-label">Ministry</label>
        <% end %>
      </div>

    <% else %>
      <div class="field">
        <%= f.label :firstname %><br />
        <%= f.text_field :firstname, autocomplete: "firstname" %>
      </div>

      <div class="field">
        <%= f.label :surname %><br />
        <%= f.text_field :surname, autocomplete: "surname" %>
      </div>
    <% end %>
  <% end %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autocomplete: "email" %>
  </div>

  <div class="field">
    <%= f.label :username %><br />
    <%= f.text_field :username, autocomplete: "username" %>
  </div>

  <div class="field">
    <%= f.label :state %><br />
    <%= f.text_field :state, autocomplete: "state" %>
  </div>

  <div class="field">
    <%= f.label :country %><br />
    <%= f.text_field :country, autocomplete: "country" %>
  </div>

  <div class="field">
    <%= f.label :bio %><br />
    <%= f.text_area :bio, autocomplete: "bio" %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <br>

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

I have also generated devise registrations controller, added params to the new action

# frozen_string_literal: true

class Accounts::RegistrationsController < Devise::RegistrationsController
  before_action :configure_sign_up_params, only: [:create]
  before_action :configure_account_update_params, only: [:update]

  # GET /resource/sign_up
  def new
    # super
    @account = Account.new configure_sign_up_params
  end

  # POST /resource
  # def create
  #   super
  # end

  # GET /resource/edit
  # def edit
  #   super
  # end

  # PUT /resource
  # def update
  #   super
  # end

  # DELETE /resource
  # def destroy
  #   super
  # end

  # GET /resource/cancel
  # Forces the session data which is usually expired after sign
  # in to be expired now. This is useful if the user wants to
  # cancel oauth signing in/up in the middle of the process,
  # removing all OAuth session data.
  # def cancel
  #   super
  # end

  protected

  # If you have extra params to permit, append them to the sanitizer.
  def configure_sign_up_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:username, :firstname, :surname, :state, :country, :bio, :account_type, :organization_name, :organization_type])
  rescue
    {}
  end

  # If you have extra params to permit, append them to the sanitizer.
  def configure_account_update_params
    devise_parameter_sanitizer.permit(:account_update, keys: [:username, :firstname, :surname, :state, :country, :bio, :account_type, :organization_name, :organization_type])
  end

  # The path used after sign up.
  # def after_sign_up_path_for(resource)
  #   super(resource)
  # end

  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end
end

I guess I am not customizing the devise registration controller properly for it not to work