Text does not display after setting initialValue

[jsoneaday]

I've got a pretty simple slate setup as shown below. When my screen loads I pass an initialValue to the editor that's shown in the screenshot. However the text "Hello World" does not display, why?

// this is the editor

<Slate editor={editor} initialValue={initialValue} onChange={onChange}>
      {readOnly ? null : <Toolbar editor={editor} />}
      <Editable
        className="txtedit-container"
        renderLeaf={renderLeaf}
        renderElement={renderElement}
        onKeyDown={onKeyDown}
        readOnly={readOnly}
      />
    </Slate>

// the renderer

export const renderElement = (props: RenderElementProps) => {
  switch (props.element.type) {
    case ElementTypes.Heading1:
      return <Heading1 {...props} />;
    case ElementTypes.Heading2:
      return <Heading2 {...props} />;
    case ElementTypes.Heading3:
      return <Heading3 {...props} />;
    case "paragraph":
      console.log("paragraph props", props);
      return <p {...props} />;
    default:
      return <span {...props} />;
  }
};

export const renderLeaf = (props: RenderLeafProps) => {
  console.log("leaf props", props);
  return <Leaf {...props} />;
};

// The log showing the sent initialValue