How to set attribute "dangerouslySetInnerHTML" with ellipsis using antd?

I need to show comment with ellipsis. I have used antd's Paragraph Typography for it. My problem is that comment can also contain html attributes (link to tagged users) so I also need to set dangerouslySetInnerHTML in the component. How to set this in Typography component?

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      {comment}
</Paragraph>

Preview:

I tried using span inside Paragraph to use dangerouslySetInnerHTML, but then ellipsis started showing just "...more" for all long comments, without showing any initial characters in the comment to fill the width. Also getting a warning on using any HTML element inside <Paragraph></Paragragh> other than string

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: "more" }}>
      <span dangerouslySetInnerHTML={{ __html: comment.comment }} />
</Paragraph>

Preview:

Warning:

Any workaround for achieving this??

First off I would love this functionality for antd Typography as well but that is not the case at the moment so here is a bit of a work around for you in the meantime.

import React, { useState } from "react";
import Button from "antd/es/button";

import ChopLines from "chop-lines";
import insane from "insane";

const Sanitized = ({ html }) => (
    <div
        className={styles.sanitizedBody}
        dangerouslySetInnerHTML={{
            __html: insane(html, {
                allowedTags: [
                    "p",
                    "strong",
                    "em",
                    "a",
                    "b",
                    "i",
                    "span",
                    "div",
                    "br",
                    "u",
                    "img",
                ],
            }),
        }}
    />
);

const Ellipsis = ({ expand }) => (
    <Button
        size="small"
        shape="round"
        type="primary"
        onClick={expand}
    >
        ...see more
    </Button>
);

const Post = ({content}) => {
    const [expanded, setExpanded] = useState(false);

    render (
        <div>
            {expanded ? (
                <Sanitized html={content} />
            ) : (
                <ChopLines
                    maxHeight={90}
                    ellipsis={
                        <Ellipsis expand={expand}>
                            <span>Read More</span>
                        </Ellipsis>
                    }
                >
                    <Sanitized html={content} />
                </ChopLines>
            )}
        </div>
    );
};