如何将CSS Paint API与Reaction一起使用

我正在try 使用CSS Paint API设置最基本的Reaction示例.

我没有编译错误，但示例没有显示.

内页index.html张:

<script>
CSS.paintWorklet.addModule('%PUBLIC_URL%/paintWorklet.js');
</script>

public/paintWorklet.js:

class Shape {
  paint(ctx, geom, properties) {
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.closePath();
  }
}

registerPaint('pattern', Shape);

App.tsx:

import React from 'react';
import './App.css';

const TestDiv = () => {  
  return(
    <div className='TestDiv'>
      <h1>I am a TestDiv</h1>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <TestDiv />
    </div>
  );
}

export default App;

App.css:

.TestDiv {
  background: paint(pattern);
}

到目前为止，我已经try 在src中移动该工作面板，将其放在一个useEffect中，但仍然没有成功.

尽管这个index.html内的代码片段可以正常工作.

 <style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: paint(pattern);
  }
</style>