How to send multiple checkbox data in Inertia with React to Laravel backend?

Hello guys, I'm trying to send multiple data (user roles) to the backend using InertiaJS with ReactJS through checkboxes. The user roles are dynamically populated from the database. However, when I submit the data, in the dd($request) I don't see the roles being passed. Instead, I see an empty array roles => [].

This is my code in the useForm():

const { data, setData, processing, errors, reset } = useForm({
            fname: "",
            lname: "",
            email: "",
            gender: "",
            mobile: "",
            password: "",
            password_confirmation: "",
            roles: [],
        })

This is the dynamic form element:

{roles.map((role, index) => {
     return (
          <label className="flex items-center" key={index}>
                <Checkbox name="roles[]" id={`role${role.id}`} value={role.id} handleChange={handleChange} required />
                <span className="ml-2 text-sm text-indigo-600">
                          {role.role}
                </span>
          </label>
      );
   }
)}

This is my submit event:

const submit = (e) => {
        e.preventDefault();
        Inertia.post(route("admin.users.store"), data);
};

In PHP, I'm using Fortify actions:

/*
*
* Commented most of the code out for the purpose of testing
*
*/
public function store(Request $request)
{
        // $newUser = new CreateNewUser();

        // $user = $newUser->create($request->only(['name', 'email', 'gender', 'mobile', 'password', 'password_confirmation']))->roles()->sync($request->roles);

        dd($request);

        // return back()->with('message', 'User has been created successfully.');
}

Any help will be appreciated. Thanks!