Hello can someone help me to fix this error?

export default function RoleForm({data, params}: RoleFormProps) {

    const [optimisticRole, addOptimisticRole] = useOptimistic(data, (state, newRole: Role) => {
        return [...state, newRole]
    });
async function onSubmit(values: z.infer<typeof formSchema>) {
        
        const newRole = {
                guildId: params.guildId,
                id: generateUniqueId(),
                name: values.name,
                color: generateRandomColor(),
                duration: values.duration,
                active: values.active,
                created: true,
                deleteAble: true,
            }
        //error happens here
        -> addOptimisticRole({...newRole});
        await roleAction(newRole, oldRole);

        t

        form.reset();

        setSelectedRole(null);
    }