flip-toolkit pour filtrage ajax

Bonjour je suis la formation filtrage en Ajax, mais je reçois une erreur

import {
    Flipper
} from 'flip-toolkit'

/**
 * @property {HTMLElement} pagination
 * @property {HTMLElement} content
 * @property {HTMLElement} sorting
 * @property {HTMLFormElement} form
 */
export default class Filter {

    /**
     * 
     * @param {HTMLElement | null} element 
     */
    constructor(element) {
        if (element === null) {
            return
        }
        //console.log('coucouuuuuuu')
        this.pagination = element.querySelector('.js-filter-pagination')
        this.content = element.querySelector('.js-filter-content')
        this.sorting = element.querySelector('.js-filter-sorting')
        this.form = element.querySelector('.js-filter-form')
        this.bindEvents()
    }

    /**
     * Ajoute les comportements aux différents éléments
     */
    bindEvents() {
        const aClickListenr = e => {
            if (e.target.tagName === 'A') {
                e.preventDefault()
                this.loadUrl(e.target.getAttribute('href'))
            }
        }
        this.sorting.addEventListener('click', aClickListenr)
        this.pagination.addEventListener('click', aClickListenr)
        this.form.querySelectorAll('input[type=checkbox]').forEach(input => {
            input.addEventListener('change', this.loadForm.bind(this))
        })
    }

    async loadForm() {
        const data = new FormData(this.form)
        const url = new URL(this.form.getAttribute('action') || window.location.href)
        const params = new URLSearchParams()
        data.forEach((value, key) => {
            params.append(key, value)
        })
        return this.loadUrl(url.pathname + '?' + params.toString())
    }

    async loadUrl(url) {

        const ajaxUrl = url + '&ajax=1'

        const response = await fetch(ajaxUrl, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        if (response.status >= 200 && response.status < 300) {
            const data = await response.json()
            //this.content.innerHTML = data.content
            this.flipContent(data.content)
            this.sorting.innerHTML = data.sorting
            this.pagination.innerHTML = data.pagination
            history.replaceState({}, '', url)
        } else {
            console.error(response)
        }
    }

    /**
     * Remplace les éléments avec effet d'animation
     * @param {string} content 
     */
    flipContent(content) {
        const flipper = new Flipper({
            element: this.content
        })
        this.content.children.forEach(element => {
            flipper.addFlipped({
                element,
                flipId: element.id
            })
        })
        flipper.recordBeforeUpdate()
        this.content.innerHTML = content
        this.content.children.forEach(element => {
            flipper.addFlipped({
                element,
                flipId: element.id
            })
        })
        flipper.update()
    }
}

Ce que je veux

Avoir un rendu flip

Ce que j'obtiens

Uncaught runtime errors:
ERROR
this.content.children.forEach is not a function
flipContent@http://localhost:8080/build/app.js:439:29
_callee2$@http://localhost:8080/build/app.js:409:20
tryCatch@http://localhost:8080/build/app.js:275:1357
./assets/modules/Filter.js/_regeneratorRuntime/makeInvokeMethod/<@http://localhost:8080/build/app.js:275:4182
./assets/modules/Filter.js/_regeneratorRuntime/defineIteratorMethods/</<@http://localhost:8080/build/app.js:275:2208
asyncGeneratorStep@http://localhost:8080/build/app.js:276:103
_next@http://localhost:8080/build/app.js:277:212
promise callbackasyncGeneratorStep@http://localhost:8080/build/app.js:276:242
_next@http://localhost:8080/build/app.js:277:212
promise callbackasyncGeneratorStep@http://localhost:8080/build/app.js:276:242
_next@http://localhost:8080/build/app.js:277:212
./assets/modules/Filter.js/_asyncToGenerator/</<@http://localhost:8080/build/app.js:277:369
./assets/modules/Filter.js/_asyncToGenerator/<@http://localhost:8080/build/app.js:277:97
loadUrl@http://localhost:8080/build/app.js:424:25
_callee$@http://localhost:8080/build/app.js:371:53
tryCatch@http://localhost:8080/build/app.js:275:1357
./assets/modules/Filter.js/_regeneratorRuntime/makeInvokeMethod/<@http://localhost:8080/build/app.js:275:4182
./assets/modules/Filter.js/_regeneratorRuntime/defineIteratorMethods/</<@http://localhost:8080/build/app.js:275:2208
asyncGeneratorStep@http://localhost:8080/build/app.js:276:103
_next@http://localhost:8080/build/app.js:277:212
./assets/modules/Filter.js/_asyncToGenerator/</<@http://localhost:8080/build/app.js:277:369
./assets/modules/Filter.js/_asyncToGenerator/<@http://localhost:8080/build/app.js:277:97
loadForm@http://localhost:8080/build/app.js:379:26
EventListener.handleEvent*./assets/modules/Filter.js/bindEvents/<@http://localhost:8080/build/app.js:354:15
bindEvents@http://localhost:8080/build/app.js:353:58
Filter@http://localhost:8080/build/app.js:335:10
./assets/app.js@http://localhost:8080/build/app.js:178:1
webpack_require@http://localhost:8080/build/runtime.js:28:33
webpack_exec@http://localhost:8080/build/app.js:484:67
@http://localhost:8080/build/app.js:485:406
__webpack_require__.O@http://localhost:8080/build/runtime.js:72:23
@http://localhost:8080/build/app.js:486:56
webpackJsonpCallback@http://localhost:8080/build/runtime.js:1216:46
@http://localhost:8080/build/app.js:1:53