React.jsにてAxios DeleteにてRequest failed with status code 422が返ってきてしまう

Question

前提

React.jsにてバックエンドから部屋の名前を拾ってきて
それを表示させています。ゴミ箱のアイコンをクリックすると
その部屋がDeleteされる機能を実装しています。

実現したいこと

現在、部屋の名前が表示されていますが
その部屋を削除する機能を実装したい。

発生している問題・エラーメッセージ

Request failed with status code 422

不思議なのが
写真のようにコンソールにはBody sent to serverの箇所には
ちゃんとroom_nameが送られているのが確認できるので
送っているデータは間違いないと思っています。

Postmanでも同じURL、データで試してみてもうまく削除できます。

該当のソースコード

const SettingGetRoomName = () => {

  const [room_name, setRoomName] = useState([]);


   const DeleteRoom = async(data) => {
    console.log("Body sent to server", {
    home_rooms: [data.item], 
  })
    await axios.delete("xxx.com",
      {
        home_rooms: [data.item], 
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        alert('Succeded delete room!');
        console.log('Succeded delete room!');
      })
      .catch(err => {
        alert('Missed delete room!');
        console.log(err);
        console.log('Missed delete room!');
      });
  }

  const getRoomName = async(data) => {
    await axios.get("xxx.com",
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data)
        setRoomName(result.data.home_rooms);  
      })
      .catch(err => {
        console.log(err);
      });
  }



  useEffect(() => {
    getRoomName();
  },[]);




  return (
    <>

            {room_name.map((item,i) => 
              <div key={i}  className="flex_setting_get_room_box">
                  <div className="my_hubs">
                    <p className="">{item}</p>
                    <img src={ic_delete} onClick={(e)=>DeleteRoom({item})}/>
                  </div>
              </div>
            )}

    </>
  );
}
export default SettingGetRoomName;

Answer 1

下記でうまくいきました！

await axios.delete("xxx.com", {
       data: {
           home_rooms: [data.item]
       },
       headers: {
           'Content-Type': 'application/json',
           'Authorization': `Bearer ${cookies.get('accesstoken')}`
       },
   })
   .then(result => {
       alert('Succeded delete room!');
       console.log('Succeded delete room!');
   })
   .catch(err => {
       alert('Missed delete room!');
       console.log(err);
       console.log('Missed delete room!');
   });