将Cursor（或Raycaster）添加到场景会引发Three.js错误

Question

使用aframe-react，当带有cursor属性的Entity收到以下错误时：

Uncaught (in promise) Error: Entity.setObject3D was called with an object that was not an instance of THREE.Object3D.

组件

import 'aframe-animation-component';
import React from 'react';
import { Entity } from 'aframe-react';

const Cursor = () =>
  (
    <Entity
      cursor={{
        fuse: true,
        fuseTimeout: 500
      }}
      geometry={{
        primitive: 'ring',
        radiusInner: 0.02,
        radiusOuter: 0.03
      }}
      material={{
        color: 'black',
        shader: 'flat'
      }}
      animation__click={{
        property: 'scale',
        startEvents: 'click',
        from: '0.1 0.1 0.1',
        to: '1 1 1',
        dur: 150
      }}
    />
  );

export default Cursor;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>