react svg use

[nonocast]

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

function App() {
  let buzy = { fill: 'blue' };

  return (
    <div className="App">
      <svg width={500} height={300} style={{ background: '#efefef' }}>
        <defs>
          <circle id='port' r={30} />
        </defs>
        <use x={100} y={100} fill={'yellow'} href={'#port'} />
        <use x={200} y={100} fill={'purple'} href={'#port'} />
        <use x={300} y={100} style={buzy} href={'#port'} />
      </svg>
    </div>
  );
}

export default App;