How to use froala editor with React hook form? Next.js

I want to use Froala editor with react hook form but I have some problems. When I start writing on the editor I get the following error.

TypeError: Cannot read properties of undefined (reading 'target')

text-editor.js

import React from "react";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import FroalaEditorComponent from "react-froala-wysiwyg";
import "froala-editor/js/plugins.pkgd.min.js";
export default function TextEditor(props) {
    return <FroalaEditorComponent {...props} />;
}

add-poetry-action.jsx

"use client";

import { Box, Button, Input, Stack, TextInput } from "@mantine/core";
import React from "react";
import { Controller, useForm } from "react-hook-form";
import TextEditor from "../text-editor";

export default function AddPoetryAction() {
    const {
        register,
        handleSubmit,
        control,
        formState: { errors },
    } = useForm();

    const submit = (values) => {
        console.log(values);
    };

    return (
        <Box
            component="form"
            onSubmit={handleSubmit(submit)}
        >
            <Stack>
                <TextInput
                    {...register("title")}
                    label="Başlık"
                    placeholder="Başlık girin"
                />

                <Input.Wrapper label="İçerik">
                    <Controller
                        name="content"
                        control={control}
                        render={({ field }) => (
                            <TextEditor
                                tag="textarea"
                                model={field.value}
                                onModelChange={field.onChange}
                                config={{ placeholderText: "İçerik" }}
                            />
                        )}
                    />
                </Input.Wrapper>

                <Button
                    color="dark"
                    type="submit"
                >
                    Yayımla
                </Button>
            </Stack>
        </Box>
    );
}

What is the right way to use it? I am also open to another editor suggestion :)

We tried a similar code you used for the question, and it works:

text-editor.js:

import React from "react";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import FroalaEditorComponent from "react-froala-wysiwyg";
import "froala-editor/js/plugins.pkgd.min.js";
export default function TextEditor(props) {
    return <FroalaEditorComponent {...props} />;
}

Add-poetry-action.jsx

"use client";
import React from "react";
import { Controller, useForm } from "react-hook-form";
import TextEditor from "./text-editor";


export default function AddPoetryAction() {
    const {
        register,
        handleSubmit,
        control,
        formState: { errors },
    } = useForm();


    const submit = (values) => {
        console.log(values);
    };

    return (
            <div>
                    <Controller
                        name="content"
                        control={control}
                        render={({ field }) => (
                            <TextEditor
                                tag="textarea"
                                model={field.value}
                                onModelChange={field.onChange}
                                config={{ placeholderText: "İçerik" }}
                            />
                        )}
                    />
            </div>
    );
}

click to check the Froala Editor on the screen

Froala recommends, in these cases, updating the framework and the editor. If the issue persists, it's crucial to consider the role of the "@mantine/core."

The problem might not be with the editor but the user's settings or implementation.

This tutorial is designed to help you integrate a rich text form using an Online JavaScript Editor on Next.js projects with the latest versions of these tools.