ReactJSでオブジェクトsrcをロードする際の問題

私はまだReactとこのフォーラムへの投稿に少し慣れていないので、ご容赦ください。現在、互いに通信していると思われる2つのReactファイルがありますが、オブジェクトから情報を取得しようとすると切断されているようです。私のReactファイルの1つは次のとおりです。

import React, { Component } from 'react';
import './App.css';

export class App extends React.Component {
  render() {
    const src = this.props.src;
    const alt = this.props.alt;
    const width = this.props.width;
    const height = this.props.height;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Will''s weird online shop thing I have no idea about</h1>
        </header>
        <p className="App-intro">
          Click the arrows to browse through the different items.
        </p>
        <img src={src} alt={alt} width={width} height={height} />
      </div>
    );
  }
}

export default App;

そしてもう1つは：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import {App} from './App';
    import registerServiceWorker from './registerServiceWorker';
    import dogbag from './images/dogbag.jpg';

    const DogBagObj = {
        src: dogbag,
        alt: 'Cute dog handbag',
        height: '100px',
        width: '70px'
    };

    const Items = [
      DogBagObj,
      'https://i.pinimg.com/736x/0b/f4/bd/0bf4bd031a363fc68b56afe6289f450f--random-pokemon-pokemon-stuff.jpg',
      'https://pbs.twimg.com/profile_images/881211588748988416/zQL9OLuc_400x400.jpg',
      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Sun-crypto-accelerator-1000.jpg/1200px-Sun-crypto-accelerator-1000.jpg'
    ]

    class OnlineStore extends React.Component {
        constructor(props) {
            super(props);

            this.state = { currentItem: 0 };

            this.interval = null;

            this.changeItem = this.changeItem.bind(this);
        }

        changeItem() {
            let current = this.state.currentItem;
            let next = ++current % Items.length;
            this.setState({ currentItem: next });
        }

        componentDidMount() {
        this.interval = setInterval(this.changeItem, 1000);
      }

        render() {
            const src = Items[this.state.currentItem];
            return <App src={src} />;
        }
    }

    ReactDOM.render(
        <OnlineStore />, 
        document.getElementById('root'));
    registerServiceWorker();

画像フォルダからdogbag.jpgを正しくインポートし、それらに直接リンクしている3つの画像が正しく読み込まれると確信しています。
私の問題は、DogBagObj.srcを正しく読み取ることにあるように感じます。Items配列のDogBagObjをdogbagに変更すると、画像が読み込まれますが、画像ごとに複数のタグ（alt、height、widthなど）を制御する機能も必要です。私が見落としているマイナーな構文エラーがありますか、それともこれは修正がはるかに難しい問題ですか？お時間をいただきありがとうございます。