rubyのチャットアプリ投稿機能をajaxで実装400番のエラー

投稿機能をajaxの実装を行うために、message.js作成し、ブラウザで確認すると、formDataで400bad requestのエラーがでます。確認したところは、messageコントローラーの記述と、XHR.openのurlの記述です。コントローラーに関してですがmessageはroomにネストしています。render jsonの上記の記述ですが、検索をしてみたのですがこれだ、っと言うものを見つけられずcreateコントローラーないが怪しいのではと思っています

route

ruby
1Rails.application.routes.draw do
2  devise_for :users
3  get 'messages/index'
4  root to: "rooms#index"
5  resources :users, only: [:edit, :update]
6  resources :rooms, only: [:new, :create, :destroy] do
7    resources :messages, only: [:index, :create, :destroy]
8  end
9end

コントローラー

Ruby
1class MessagesController < ApplicationController
2  def index
3    @message = Message.new
4    @room = Room.find(params[:room_id])
5    @messages = @room.messages.includes(:user)
6  end
7
8  def create
9    room = Room.find(params[:room_id])
10    message = room.messages.create(message_params)
11    render json:{ room: room, message: message }
12  end
13
14private
15  def message_params
16    params.require(:message).permit(:content, :image).merge(user_id: current_user.id, room_id: params[:room_id])
17  end
18end

jsファイル

js
1function message() {
2  const formSubmit = document.getElementById("form-submit");
3  formSubmit.addEventListener("click",(e) => {
4    const formData = new FormData(document.getElementById("form"));
5    const XHR = new XMLHttpRequest();
6    XHR.open("POST", "/rooms/#{room.id}/messages", true);
7    XHR.responseType = "json";
8    XHR.send(formData);
9    XHR.onload = () => {
10      if (XHR.status != 200) {
11        alert(`Error ${XHR.status}: ${XHR.statusText}`);
12        return null;
13      }
14      const item = XHR.response.room.message;
15      const messages = document.getElementById("message");
16      const messageContent = document.getElementById("message_content");
17      const HTML = `
18        <div class="upper-message">
19          <div class="message-user">
20            ${item.user.name}
21          </div>
22          <div class="message-date">
23            ${item.created_at}
24          </div>
25        </div>
26        <div class="lower-message">
27          <div class="message-content">
28            <% if message.content %>
29            ${room.currency.name} ${item.content.to_s(delimited)}<br>
30            <div class="lower-sub-message">
31              "換算額は¥"${(item.content / room.price * 100).floor.to_s(delimited)}<br>
32              ${room.number}"人で割った1人分の金額は"${room.currency.name}${(item.content /room.number).to_s(delimited)}<br>
33              ${room.number}"人で割った1人分の換算額は¥"${(item.content / room.price * 100 / room.number).floor.to_s(delimited)}
34            <% end %></br>
35            </div>
36          </div>
37          <img src= ${item.image.variant(resize= '300x300')}, class: 'message-image' if message.image.attached? >
38        </div>
39      `;
40      messages.insertAdjacentHTML("afterbegin",HTML);
41      formText.value = "";
42    };
43    e.preventDefault();
44  });
45}
46window.addEventListener("load",message);