Getting runtime error while rendering SlateJS Descendent[] rich text content, NextJS14 and Typescript

Question

react-dom.development.js:9439 Uncaught Error: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead.

Getting this error while trying to render the SlateJS rich text content. It is being passed as the Descendent[] type. The code is:

const RenderSlateContent: React.FC<{ content: Descendant[] }> = ({ content }) => {
  const editor = useMemo(() => withReact(createEditor()), []);
  console.log("Content: ", content)
  return (
    <Slate editor={editor} initialValue={content}>
      <Editable
        readOnly={true}
        renderElement={({ attributes, children, element }) => {
          // Ensure children are rendered as React elements or text
          return (
            <div {...attributes}>
              {Array.isArray(children)
                ? children.map((child, index) => {
                    if (typeof child === 'object' && 'text' in child) {
                      return <span key={index}>{child.text}</span>;
                    }
                    return child;
                  })
                : children}
            </div>
          );
        }}
        renderLeaf={({ attributes, children, leaf }) => {
          // Convert object children to text if needed
          let renderedChildren = typeof children === 'object' && 'text' in children ? children.text : children;
      
          if (leaf.bold) {
            renderedChildren = <strong>{renderedChildren}</strong>;
          }
          if (leaf.italic) {
            renderedChildren = <em>{renderedChildren}</em>;
          }
          if (leaf.underline) {
            renderedChildren = <u>{renderedChildren}</u>;
          }
      
          return <span {...attributes}>{renderedChildren}</span>;
        }}
      />
    </Slate>
  );
};

It is being called in my main component like this:

<div className="text-gray-600 mb-4">
        <RenderSlateContent content={currentLesson.content} />
      </div>

The data is being processed correctly, the RenderSlateContent component is not working correctly.