SVG Sprite Loader issue

React-component.js

const Graphic = (props) => {

	const {glyph, ...rest} = props;

	let svg = null;

	try {
		svg = require('../../assets/svg/' + glyph + '.svg').default;
	} catch (err) {
		return null;
	}

	return (
		<svg {...rest} viewBox={svg.viewBox}>
			<use xlinkHref={svg.url}/>
		</svg>
	);
};

export default Graphic;

sample-use.js

import Graphic from 'component/graphic';

export default const Test = (props) => {
	const id = props.id || 'clock';
	return (
		<div>
			<Graphic glyph={id}/>
		</div>
	);
};

webpack.js

rules: [
		{
			test: /\.svg$/,
			loader: 'svg-sprite-loader',
			options: {
				extract: true,
				spriteFilename: 'svg-sprite.svg'
			}
		}
	];
};


...

plugins: [

			new SpriteLoaderPlugin()

]

...