Tracker.autorun not refreshing data

react
1

I am taking a meteor course on Udemy and came across a problem where the tracker.autorun function does not refresh the data every time something is changed.

import React from "react";
import ReactDOM from "react-dom";
import {Meteor} from "meteor/meteor";
import {Tracker} from "meteor/tracker";

import {Players} from "./../imports/api/players.js";

const renderPlayers = function(playersList){
    return playersList.map(function(player){
        return <p key={player._id}>{player.name} has {player.score} point(s)</p>
    });
};

const handleSubmit = function(e){
    let playerName = e.target.playerName.value;

    e.preventDefault();

    if(playerName){
        e.target.playerName.value = "";
        Players.insert({
            name:playerName,
            score:0
        })
    }
}

Meteor.startup(function(){
    Tracker.autorun(function(){
        let players = Players.find().fetch();
        let title = "Score Keep"
        let name = "Stuart";
        let jsx = (
        <div>
            <h1>{title}</h1>
            <p>Hello {name}</p>
            <p>This is my second p.</p>
            {renderPlayers(players)}
            <form onSubmit={handleSubmit}>
                <input type="text" name="playerName" placeholder="Player Name"/>
                <button>Add Player</button>
            </form>
        </div>
        );
        ReactDOM.render(jsx, document.getElementById("app"));
    });
});

Error from the browser:

Exception from Tracker recompute function:

Invariant Violation: Objects are not valid as a React child (found: object with keys {playerName}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

What I am trying to do is make a score keeping web app. What I am having difficulty with is whenever someone submits the form, it adds a new item to the database and automatically updates the data like how web apps work. Thanks in advanced!