ReactJS - невозможно прочитать this.props.value для объекта состояния

Я только начинаю изучать ReactJS и обнаружил ошибку при компиляции кода:

TypeError: невозможно прочитать значение свойства undefined

Ошибка возникает в этой строке: count: this.props.valueв файле. counter.jsx

Как видите, я попытался использовать console.log(this.props)функцию рендеринга counter.jsx, чтобы проверить, установлены ли реквизиты. Они установлены - поэтому я не знаю, почему я не могу получить к нему доступ в объекте состояния в моем классе Counter.

Вопрос: Что я делаю не так?

counter.jsx:

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: this.props.value,
        tags: []
    };

    render(){
        console.log(this.props);
        return (<React.Fragment>
                    <span>{this.formatCount()}</span>
                </React.Fragment>
        );
    }

    formatCount(){
        var { count } = this.state;
        return count === 0 ? <h1>Zero</h1> : count;
    }
}
export default Counter;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';

import Counters from './components/counters';

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

counters.jsx:

import React, {Component} from 'react';
import Counter from './counter';

class Counters extends Component {
    state = {
        counters: [
        {id: 1, value: 4},
        {id: 2, value: 0},
        {id: 3, value: 0},
        {id: 4, value: 0},
        ]
    };
    render(){
        return (
            <div>
            {this.state.counters.map(counter => (<Counter key={counter.id} value={counter.value} selected={true} />))}
            </div>
        );
    }
}

export default Counters;