Insert peity in typed.js

I’d like to insert a peity graphic inside typed.js but it doesn’t work the way I’ve done it. My code:

let typed = new Typed('#typedintro1', {
        strings: ['<h3 class="h1intromodal1">Product with<b style="color: #dd4b39;"> low contribution </b>margin.</h3>',
        '<div><span id="peityDropStatus1">12, 50, 38</span> The contribution is very large. Please</div>',
        '<h3 class="h1intromodal1"><b style="color: #56cc66;">Effortlessly</b>...</h3>'],
        loop: true,
        typeSpeed: 25,
        backSpeed: 15,
        startDelay: 1,
        backDelay: 1
     });

$(function() {
       $('#peityDropStatus1').peity('donut', {
       fill: ['purple', 'yellow', 'green'],
       width: 40,
       height: 45,
       innerRadius: 12
       });
     })
<head>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/jquery.peity.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>
</head>

<body>
<div id='typedintro1' style='position: relative; top: 12px;'></div>
</body>

Note that the graph doesn’t appear, only the numbers inside the span tag.