Trying to upload image from react through a rails API renders Unpermitted parameter: :image error

Question

I am trying to upload an image from React using rails active storage. The problem is I am receiving the following error when making the request,

ArgumentError (Could not find or build blob: expected attachable, got <ActionController::Parameters {} permitted: false>):

The controller with the create action.

 def create
    micropost = @current_user.microposts.build(micropost_params)
    micropost.image.attach(params[:micropost][:image])
    binding.pry
    if micropost.save
      render json: micropost
    else
      render json: { errors: micropost.errors }
    end
  end

I am using strong parameters.

    def micropost_params
      params.require(:micropost).permit(:content, :image)
    end

This is how the form looks like in the frontend

  <input        
    type="file"
    accept="image/*"
    multiple={false}
    onChange={(event) => setImage(event.target.files[0])}
  />

The request I make in the frontend.

export async function createMicropost(content, image) {
  console.log(image);
  return request({
    url: "/micropost/new",
    method: "POST",
    data: {
      micropost: {
        image: image,
        content: content,
      },
    },
  });
}

I have also tried replacing :image with image: {} in micropost_params, it stopped rendering the Unpermitted parameter: :image error when I used binding.pry but the 500 still remained with the same error as in the first image.