Tracker.autorun not refreshing data


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 <p key={player._id}>{} has {player.score} point(s)</p>

const handleSubmit = function(e){
    let playerName =;


    if(playerName){ = "";

        let players = Players.find().fetch();
        let title = "Score Keep"
        let name = "Stuart";
        let jsx = (
            <p>Hello {name}</p>
            <p>This is my second p.</p>
            <form onSubmit={handleSubmit}>
                <input type="text" name="playerName" placeholder="Player Name"/>
                <button>Add Player</button>
        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!