Auto Checked the Checkbox based on the data in database when Editing the data react, inertia , laravel

I'm facing a problem with the edit data feature, as you can see in my title I need to auto-check the checkbox based on the data stored in the database. in detail what I'm trying to do is to check the checkbox of the list of permissions given to the specified role when I try to edit the specified role. so the user dont need to add the permissions from zero. I'm using laravel as the backend and reactjs for the front end also inertiajs as the bridge. i have no idea how to solve this.

this is my code

export default function EditPermission (props){
const {role} = usePage().props
const { data, setData, put, processing, errors, reset } = useForm({
    name: role.name || '',
    permissions: role.permissions || ''
});

const onHandleChange = (event) => {
    setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value);
};

const handleChecked = (e) => {
    let value = e.target.name;
    if (e.target.checked) {
        setData("permissions", [...data.permissions, value]);
    } else {
        setData(
            "permissions",
            data.permissions.filter((item) => {
                return item !== value;
            })
        );
    }
};

const submit = (e) => {
    e.preventDefault();
    put(route('role.update',permission.id));
};

return (
    <AuthenticatedLayout auth={props.auth} errors={props.errors}>
    <div className="w-full lg:max-w-6xl mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">        
        { props.flash.message !== null ? <Flash message = {props.flash.message}/> : <div></div>}    
        <form onSubmit={submit}>
            <div>
                <InputLabel forInput="name" value="Role" />

                <TextInput
                    type="text"
                    name="name"
                    value={data.name}
                    className="m-2 input input-bordered w-full"
                    autoComplete="name"
                    isFocused={true}
                    handleChange={onHandleChange}
         
                />
            
                <InputError message={errors.name} className="mt-2" />

                <div class="grid grid-cols-5 gap-4">                
                    {props.permissions && props.permissions.length > 0 ? props.permissions.map((permissions, i) => {
                        return(
                            <div>
                                <Checkbox name={permissions.name}value={data.permissions} handleChange={handleChecked} />{permissions.name}
                            </div>
                        )
                            
                            
                        }):<p>Permission Belum Ada!</p>
                    }
                </div>

                <InputError message={errors.permissions} className="mt-2" />


                <PrimaryButton className="ml-4" processing={processing}>
                    Update
                </PrimaryButton>
            </div>

        </form>
    </div>

    </AuthenticatedLayout>
    
)

} i was able to retrive data from the controller which 开发者_如何学Pythonis inluded the specified role and the permission. i just need to auto-check the checkbox based on the data when user jump to edit feature.

Thank You in Advance