Component not receiving props from withTracker

help
1

I’m trying fetch data from the database inside a withTracker that wraps the App component, but the component never gets
the fetched data as props. I’m thinking that maybe something is wrong my routing. Also I’m very new to meteor/react and just started to learning it. What am I doing wrong here?

withTracker:

import React, { Component } from 'react';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';

import App from './App';
import { Players } from '../api/players';

export default AppContainer = withTracker(() => {
  const subsrciption = Meteor.subscribe('players');
  const ready = subsrciption.ready();
  const players = Players.find({}, {sort: {name: 1}}).fetch();

  return {
    ready,
    players,
  };
})(App);

App component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { List } from 'material-ui/List';
import Divider from 'material-ui/Divider';
import { Link } from 'react-router-dom';

// database - collection
import { Players } from '../api/players';

import TeamList from './Team-list';
import Player from './Player';
import AppContainer from './AppContainer';

export default class App extends Component {
  constructor(props) {
    super(props);

    // setting up the state
    this.state = { players: [] };
    this.renderPlayers = this.renderPlayers.bind(this);
  }

  renderPlayers() {
    console.log(this.props);
    if( !this.props.ready ) {
      return <h5>Loading players</h5>;
    } else {
      return this.props.players.map((player) => (
            <TeamList key={player._id} player={player} />
      ));
    }
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="container">
            <div className="col s12 m5" >
              <h2>Team list</h2><Link to='/new' className="waves-effect waves-ligth btn">Add player</Link>
              <Divider/>
                <List>
                  {this.renderPlayers()}
                </List>
              <Divider/>
            </div>
         </div>
      </MuiThemeProvider>
    )
  }
}

App.propTypes = {
  players: PropTypes.array.isRequired,
};

client/main.js (routing):

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import App from '../imports/ui/App';
import New from '../imports/ui/New';
import Lost from '../imports/ui/Lost';
import AppContainer from '../imports/ui/AppContainer';

injectTapEventPlugin();

Meteor.startup(() => {
  render((
    <BrowserRouter>
    <Switch>
      <Route path='/' exact component={App}/>
      <Route path='/new' exact render={props => <New {...props} />}/>
      <Route path='/*' exact component={Lost}/>
    </Switch>
    </BrowserRouter>
  ), document.getElementById('render-target'));
});