[react-g] 支持 createRoot 以及 render

[xiaoiver]

目前用法如下，需要重新创建 Canvas，对于已有的 Canvas 则无法使用：

import React, { useState } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const App = () => {
    const [size, setSize] = useState(50);
    return (
        <Canvas width={600} height={400} renderer={renderer}>
            <Circle
                cx={100}
                cy={200}
                r={size}
                fill="#1890FF"
                stroke="#F04864"
                lineWidth={4}
                onClick={() => {
                    setSize(100);
                }}
            />
        </Canvas>
    );
};

export default App;

参考 React 的用法：https://react.dev/reference/react-dom/client/createRoot#root-render

import { createRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = createRoot(domNode);

可以支持如下用法，使用 createRoot 传入已创建的 Canvas，然后调用 render：

import { createRoot } from 'react-g';
const root = createRoot(canvas); // GCanvas

root.render(<Circle cx={100} cy={cy} />);

https://docs.pmnd.rs/react-three-fiber/api/canvas#custom-canvas