react-wordcloud で何も表示されない

前提・実現したいこと

react-wordcloudを使って、wordcloudを表示させたい。

発生している問題・エラーメッセージ

エラーは発生していないが、何も表示されない。

該当のソースコード

typescript
1import React, { VFC } from "react"
2import ReactWordcloud, { Word, Options } from 'react-wordcloud'
3
4const testwords: Word[] = [
5  {
6    text: 'told',
7    value: 64,
8  },
9  {
10    text: 'mistake',
11    value: 11,
12  },
13  {
14    text: 'thought',
15    value: 16,
16  },
17  {
18    text: 'bad',
19    value: 17,
20  },
21  {
22    text: 'INO',
23    value: 30,
24  },
25]
26  
27type WordCloudProps = {
28 
29}
30
31export const WordCloud: VFC<WordCloudProps> = (props) => {
32  return (
33    <>
34      <div style={{ height: "100%", width: "100%" }}>
35        <ReactWordcloud
36          words={testwords}      
37        />
38      </div>
39    </>
40  )
41}

正確にはReactWordCloudのコンポーネントの前にヘッダーが入っていますが、ほとんどこの通りです。
これをhome画面で受け取って表示しようとしています。
testwordsの内容は公式にサンプルデータとして使われているものです。

react-wordcloud

試したこと

正しく表示されている場合、ブラウザ上でelementsを見ると以下のように、svgタグの中にwordcloud内の単語が1つずつtextタグに入って出てきます。

html
1<svg height="390.5" width="396" style="display: block;">
2  <g transform="translate(198, 195.25)">
3    <text cursor="default" fill="#BCBD22" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(19, -43)" font-size="32px">Parkinson's</text>
4    <text cursor="default" fill="#8C564B" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(75, -70)" font-size="26px">PD</text>
5    ...
6  </g>
7</svg>

以下が私のコードが生成する同一箇所のsvgタグです。

html
1<svg height="396.5" width="1265" style="display: block;">
2  <g transform="translate(632.5, 198.25)">
3    <text cursor="default" fill="#17becf" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(0, 0) rotate(0)"></text>
4    <text cursor="default" fill="#1f77b4" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(0, 0) rotate(0)"></text>
5    <text cursor="default" fill="#17becf" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(0, 0) rotate(0)"></text>
6    <text cursor="default" fill="#7f7f7f" font-family="times new roman" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(0, 0) rotate(0)"></text>
7  </g>
8</svg>

タグ自体は生成されていますが、textタグの中のchildrenがカラになっていて、位置情報やフォントサイズも処理されずに出てきています。
サンプルデータ内のデータ数を変えればtextタグの数も変わるので、testwordsを読もうとはしてるが、処理できていないように見えます。
なぜこのような状態になるのかわからず...ご教示いただきたいです。