Custom tags TinyMCE in React not working properly

Question

I'am trying to add custom tags to a tinyMCE editor.I want to add: <paraphraser id="some id">SOME TEXT</paraphraser> and <chatgpt id="some id">some text</chatgpt>

I have the init config like this:

init={{
                            // selector: "#editor",
                            branding: false,
                            extended_valid_elements: "paraphraser, chatgpt",
                            // plugins: "advlist anchor autolink autosave charmap codesample directionality emoticons help image insertdatetime link lists media nonbreaking pagebreak searchreplace table visualblocks visualchars wordcount example",
                            toolbar:
                                "undo redo spellcheckdialog | blocks fontfamily fontsize | " +
                                "bold italic underline forecolor backcolor | link image addcomment showcomments | " +
                                "align lineheight checklist bullist numlist | indent outdent | " +
                                "removeformat | example",
                            height: "100vh",
                            menu: {
                                file: {
                                    title: "File",
                                    items: "newdocument restoredraft | example print",
                                },
                            },
                            toolbar_sticky: true,
                            autosave_restore_when_empty: true,
                            tinycomments_mode: "embedded",
                            content_style: `
                            body {
                                background: #fff;
                            }

                            @media (min-width: 840px) {
                                html {
                                background: #eceef4; #F2F2F2
                                min-height: 100%;
                                }

                                body {
                                background-color: #fff;
                                box-shadow: 0 0 4px rgba(0, 0, 0, .15);
                                box-sizing: border-box;
                                margin: 1rem auto 0;
                                max-width: 820px;
                                min-height: calc(100vh - 1rem);
                                padding: 4rem 4rem 4rem 4rem;
                                font-size: 15px;
                                font-family: Arial;
                                margin-bottom: 60px;
                                margin-top: 35px;
                                border-radius: 8px;

                                /* Experimental*/
                                position: relative;
                                overflow-x: hidden;
                                transition: all 0.2s;
                                }

                                /* Scroll*/
                                /* width */
                                ::-webkit-scrollbar {
                                width: 6px;
                                border-radius: 10px;
                                }

                                /* Track */
                                ::-webkit-scrollbar-track {
                                background: #f1f1f1;
                                }

                                /* Handle */
                                ::-webkit-scrollbar-thumb {
                                background: #888;
                                }

                                /* Handle on hover */
                                ::-webkit-scrollbar-thumb:hover {
                                background: #555;
                                }
                            }`
                            ,
                        }}

That's the only custom configuration regarding custom tags. The problem is that when I add the tag <paraphraser> and print it in console it prints it without the id, and when I try to print the <chatgpt> tag it prints <p>&iexcl;Hello! &iquest;</p>.

I don't know what's happening but I want it to point every custom tag i add with their custom properties.