When toggling on block by adding heading style the text starts with a margin between it and toolbar, but then after toggle margin disappears

[jsoneaday]

I think showing might make more sense so I've shown all states below. This happens when toggling between different headings. I've not put my own styles on the heading so not sure why this happens. Here's some of my code.

// editor

export default function TextEditor() {
  const [_value, _setValue] = useState<string | null>();
  const [editor] = useState(() => withReact(withHistory(createEditor())));

  const onKeyDown = useCallback(
    (e: KeyboardEvent<HTMLDivElement>) => {
      if (!e.ctrlKey) return;

      switch (e.key) {
        case "`":
          e.preventDefault();
          Commands.toggleHeadingBlock(editor, ElementHeaderTypeLevels.Level1);
          break;
        case "b":
          e.preventDefault();
          Commands.toggleBoldMark(editor);
          break;
      }
    },
    [editor]
  );

  const onChange = (value: Descendant[]) => {
    console.log("value", value);
  };

  return (
    <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
      <Toolbar editor={editor} />
      <Editable
        className="txtedit-container"
        renderLeaf={renderLeaf}
        renderElement={renderElement}
        onKeyDown={onKeyDown}
      />
    </Slate>
  );
}

// heading

export function Heading1({ attributes, children }: SlateProps) {
  return <h1 {...attributes}>{children}</h1>;
}

// toolbar

export function Toolbar({ editor }: ToolbarProps) {
  const onClickHeader1 = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    Commands.toggleHeadingBlock(editor, ElementHeaderTypeLevels.Level1);
  };
  const onClickHeader2 = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    Commands.toggleHeadingBlock(editor, ElementHeaderTypeLevels.Level2);
  };
  const onClickHeader3 = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    Commands.toggleHeadingBlock(editor, ElementHeaderTypeLevels.Level3);
  };
  const onClickBold = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    Commands.toggleBoldMark(editor);
  };

  return (
    <div className="txtedit-toolbar">
      <button
        className="secondary-btn small-btn"
        style={{ width: "3em", marginRight: ".5em" }}
        onClick={onClickHeader1}
      >
        H1
      </button>
      <button
        className="secondary-btn small-btn"
        style={{ width: "3em", marginRight: ".5em" }}
        onClick={onClickHeader2}
      >
        H2
      </button>
      <button
        className="secondary-btn small-btn"
        style={{ width: "3em", marginRight: ".5em" }}
        onClick={onClickHeader3}
      >
        H3
      </button>
      <button
        className="secondary-btn small-btn"
        style={{ width: "4em", marginRight: ".5em" }}
        onClick={onClickBold}
      >
        Bold
      </button>
    </div>
  );
}

// correct style before setting heading

// correct style when heading first set

// incorrect style after heading added then removed