Tiene que crear una página de edición editando una serie de parámetros en una instancia de un recurso 'cuento'.

Sin embargo, agregar cualquier elemento, como una tarjeta MUI o incluso un div, hace que la aplicación se congele de varias maneras.

Estos son los enfoques que he probado.

1) Agregar un componente de tarjeta o colocar mis elementos dentro de un div para diseñar

export const EditorEditTale = (props) => {
  return (
  <Edit {...props} title="Tale Editor">
    <SimpleForm >
      <div>
        <Image />
        <TaleCardHeader props={ props } style={taleCardHeaderStyle.editor} />
      </div>
    </SimpleForm>
  </Edit>
  )
};

Esto no está causando que se procese nada.

Segundo enfoque, suponiendo que el registro y basePath no se propaguen completamente a los niños. Intentando usar el componente como a continuación.

const Input = ({record, basePath}) => {
  return (
    <div>
      <LongTextInput source="taleText" />
    </div>
  )
}

Esto está causando que la página no se procese con todo en algún tipo de bucle de bloqueo con el error: no se puede leer la propiedad tocada de indefinido.

¿Cómo debo crear una página de edición personalizada con entradas y estilos complejos?

ACTUALIZACIÓN: hasta ahora he intentado escribir un formulario personalizado para sustituir el componente SimpleForm sin suerte.