Integrate aframe-react with aframe-orbit-controls-component

I'm using aframe-react to build a react component to load gltf assets and with orbit-control functionalities(Zoom, rotate..), so I used this https://github.com/supermedium/superframe/tree/master/components/orbit-controls component, here is my code:

import 'aframe';
import { Entity, Scene } from 'aframe-react';
import 'aframe-orbit-controls-component';
import './GltfLoader.scss';

export default class GltfLoader extends React.Component {
  constructor(props) {
    super(props);
  }

  public render() {
    return (
      <Scene embedded="true">
        <Entity position="0 0 -5" gltf-model={'/assets/gltf/test.gltf'} />
        <Entity
          primitive="a-camera"
          look-controls="true"
          orbit-controls={{
            target: '0 1.6 -0.5',
            minDistance: 0.5,
            maxDistance: 180,
            initialPosition: '0 0 -5'
          }}
        />
      </Scene>
    );
  }
}

I'm not quite sure about the syntax, and the result is I was able to load the gltf and move it in certain directions, but not able to zoom in and out. Wonder how to wrap this with aframe-react syntax, thanks! I tested this orbit-control component with aframe, and it works, here is the code for reference:

<head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-orbit-controls@1.2.0/dist/aframe-orbit-controls.min.js"></script>

  </head>

  <body>
     <a-scene>
            <a-assets>
               <a-asset-item id="test" src="./assets/test.gltf">
            </a-assets>
            <a-gltf-model src="#test"></a-gltf-model>
            <a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15"></a-entity>
    </a-scene>
  </body>

supermedium / aframe-react

Integrate aframe-react with aframe-orbit-controls-component #123