d3-graphviz with html label image not align to center and text background color missing

Question

Below demo, I expect the top image align center and the text show background color, it works fine in html, but not work in graphviz sample below:

test()
function test() {
    var dots = `digraph G {
    graph [ compound=true, labelloc="b" rankdir=TB ratio=compress size="15,10"]
    node [shape=plaintext height=.8 fontsize=10 imagepos="tc" labelloc="b" imagepos="tc"]
    
    A [label=<
        <table cellspacing="0" border="0" cellborder="1">
            <tr><td><img style="display: block;margin-left: auto;margin-right: auto;" src="https://img.icons8.com/external-justicon-flat-justicon/1x/external-officer-fire-fighter-justicon-flat-justicon.png" border="1px solid red"/></td></tr>
            <tr><td style="text-align:center;background-color:#ff0000;">MainOfficer</td></tr>
        </table>
        >]
}`
    
    var svg = d3.select('body')
        .append('svg')
        .attr('width',800)
        .attr('height',600)

    svg.graphviz()
        .addImage("https://img.icons8.com/external-justicon-flat-justicon/1x/external-officer-fire-fighter-justicon-flat-justicon.png", "64px", "64px")
        .renderDot(dots)
}

  <script src="https://unpkg.com/d3@7.0.4/dist/d3.min.js"></script>

  <script src="https://unpkg.com/d3-graphviz@5.0.2/build/d3-graphviz.js"></script>