Reactからaxiosを用いて、Railsに画像を送信したい

Question

前提

現在、ReactとRailsを用いて、アプリケーションを作成しています。
Rails側で CarrierWaveを用いて、画像のアップロード機能を作成しています。
その際に、Rails側は、curlコマンドで正常に画像のアップロードができることを確認できました。
Reactで画像のアップロード機能を実装中に下記のコードのように実装していたのですが、データの送信は正常にできるものの、送信されたデータを見てみると、データがnullになっています。

実現したいこと

Reactで送信したデータを正常にRails側のDBに入るようにしたいです。

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

下記のimage: object
url: null
の箇所が本来画像データが入る場所なのですが、送信はできても、データ自体が入っていない状態です。

該当のソースコード

下記が現在のソースコードです。
下記のconst { token } = useContext(AuthContext);
の箇所は、別のファイルからトークン情報を取得して、付与しています。
react-hook-formを使用しています。

import newComicForm from "../../../css/ui/newComicForm.module.css"
import { useForm } from 'react-hook-form';
import comicNewGenreJson from "../../../json/comicNewGenre.json";
import { useContext } from "react";
import axios from "axios";
import { AuthContext } from "../../../providers/AuthGuard";

const ComicNew = () => {
  const { token } = useContext(AuthContext);

  const { handleSubmit, register, formState: { errors } } = useForm({
    criteriaMode: "all"
  });

  const onSubmit = async (data) => {
    console.log(data)
    const createFormData = () => {
    const formData = new FormData();
    formData.append("image.url", data.image.url[0]);
    formData.append("title", data.title);
    formData.append("genre", data.genre);
    return formData;
    };

    const datai = createFormData();

    const res = await axios.post(`${process.env.REACT_APP_DEV_API_URL}/user/comics`, datai, {
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'multipart/form-data',
      },
    })
    .catch((error) => {
      console.error(error.res.data);
    });
    alert(JSON.stringify(`${res.message}, status: ${res.status}`));
    console.log(data)
  };

  return (
    <div className={newComicForm.wrapper}>
      <form onSubmit={handleSubmit(onSubmit)} className={newComicForm.form}>
        <div className={newComicForm["form-text"]}>
          <div className={newComicForm["form-label"]}>漫画のタイトル</div>
          { errors.title &&
            <div className={newComicForm.errors}>【！漫画のタイトルが空欄です】</div> 
          }
          <input
            className={newComicForm["form-input"]}
            placeholder="漫画のタイトルを入力してください"
            name="title"
            {...register("title")}
          />
        </div>
        <div className={newComicForm["form-text"]}>
          <div className={newComicForm["form-label"]}>漫画のジャンル</div>
          { errors.genre &&
            <div className={newComicForm.errors}>【！漫画のジャンルを選択してください】</div> 
          }
          <select
            className={newComicForm["form-input"]}
            name="genre"
            {...register("genre")}
          >
            <option></option>
            {comicNewGenreJson.map((genre, index) =>
              <option key={index} >{ genre.genre }</option>
            )}
          </select>
        </div>
        <div className={newComicForm["form-text"]}>
          <div className={newComicForm["form-label"]}>漫画の画像</div>
          <input
            className={newComicForm["form-input"]}
            type="file"
            accept="image/*"
            {...register("image.url")}
          />
        </div>
        <div className={newComicForm["form-text"]}>
          <button className={newComicForm["form-submit"]} type="submit">この内容で登録する</button>
        </div>
      </form>
    </div>
  );
};

export default ComicNew;

試したこと

送信自体は正常にできているのでエラーも出ず、現状何が問題なのかが分からない状態です。
初心者で分かりにくい箇所があるかと思いますが、回答のほどいただけたら幸いです。
不明な点があれば、ご指摘いただければ幸いです。
よろしくお願いします。

Answer 1

const onSubmit = async (data) => {
    console.log(data)
    const createFormData = () => {
    const formData = new FormData();
    formData.append("image.url", data.image.url[0]);
    formData.append("title", data.title);
    formData.append("genre", data.genre);
    return formData;
    };

上記のコードの部分を下記のように記述したら正常にデータが送られるようになりました。

formData.append("image", data.image[0]);