Estoy usando Next.JS en mi proyecto. Quiero agregar el editor TinyMCE a mi página. He usado el siguiente código.

 <TinyMceEditor selector='textarea' initialValue={ props.value } apiKey=<API_KEY> init={{ height: 500, menubar: false, plugins: [ 'advlist autolink lists link image', 'charmap print preview anchor help', 'searchreplace visualblocks code', 'insertdatetime media table paste wordcount' ], toolbar: 'undo redo | formatselect | bold italic underline | \ alignleft aligncenter alignright | \ bullist numlist outdent indent | \ anchor link table image media video | \ searchreplace visualblocks code' }} onChange={(...args) => console.log(args)} />

Obtengo dos comportamientos diferentes de este código para las dos páginas diferentes.

En la página de inicio, es decir localhost:3000/ , el editor funciona correctamente. Puedo agregar imágenes a través de un modal emergente, adjuntar un enlace, etc.

Pero cuando voy a localhost:3000/admin/teams los campos de entrada del modal emergente no se pueden enfocar. No se enfoca cuando hago clic en él. Pero al mismo tiempo, puedo interactuar con los botones/casillas de verificación. Simplemente no se está enfocando en el campo de entrada.

No entiendo qué está causando este problema. El mismo problema también está ocurriendo en el editor Jodit. No entiendo si está relacionado con el problema del entorno Next.JS o el problema relacionado con la ruta. Desde los últimos días después de experimentar con estos dos editores, creo que el problema está relacionado con los elementos modales utilizados en ellos (tal vez).

Cualquier consejo o ayuda será apreciada. Gracias.