Issue with setting an image as a nested state in React

So I have a react frontend which is responsible for getting inputs to create a new user for my app. It hits the backend server when the user submits the form. In that form, I have a file input to allow a user to select an avatar. On the backend, I use rails active storage to handle saving that image to aws. The issue here is I want to save the image as a nested prop under the user state. So given the constructor method of the UserForm Component;

I have a few text inputs for the full name, email and password and a file input for the avatar. The idea is to grab all of that and send it as a formdata to the rails backend. I can then grab the entire user params and create a new user on the backend.

So here's my inputs:

Here's my code when a user types into the text fields. It saves the inputs to the nested state of the User state:

The issue is when Im trying to attach the image and save it under User.avatar state.

When I do Console.log(file), I get this which is correct, it show the image:

But when I check state User.Avatar, it shows this. user.avatar is an empty object!

But if I just set the image directly on a top level state like this:

The state for file is showing up fine:

Any ideas why this is happening? Its so weird!

Edit 1

According to a solution below by Ilia, just send it to the backend. So assuming I send it to the backend with avatar saved under the user object in state. Here's my code which does that:

   submitUser = async () => {    
    let formData = new FormData();

    formData.set("user", JSON.stringify(this.state.user));    

    const res = await axios({
      method: 'post',
      url: '/users/',
      data: formData,
      headers: {
      'content-type': `multipart/form-data; boundary=${formData._boundary}`,
      },
    });

On my rails backend:

def create    
    @user = User.new(user_params)    

    if @user.save
      flash[:notice] = "Welcome #{@user.full_name}"
      render json: { status: true }
      session[:user_id] = @user.id     
    else
      flash[:error] = "Please fix the following error(s)"
      render json: { error: @user.errors.messages }
    end
  end

And my strogn params is handling the params (debugging code in here):

def user_params       
    json_params = ActionController::Parameters.new( JSON.parse(params[:user]) )
    binding.pry     
    res = json_params.require(:user).permit(:email, :full_name, :password)

    res
  end

My avatar is jsut an empty obj..

I'm not sure what you meant by making it as an image source?