title: Setting default state dynamically + onMouseEnter
body: <p>I have created a scoreboard that updates when a user hovers over each team's card, hovering over a team's card also changes some CSS attributes to make it stand out.
  The current default state value is &quot;0&quot;, I need the default value to be equal to the top team's score.
  Below is the TeamCard component that updates TopGroups with onMouseEnter:</p>
  <pre><code>const TeamCard = ({
    data,
    setDisplayGoals,
    setDisplayMilestones,
    setDisplayPoints,
  }) =&gt; {
    return (
      &lt;TeamCardStyle&gt;
        &lt;Row className=&quot;d-flex justify-content-between&quot;&gt;
          {!data &amp;&amp; &lt;Spinner /&gt;}
          {data &amp;&amp;
            data.getGroupScores &amp;&amp;
            data.getGroupScores.slice(0, 4).map((group, index) =&gt; {
              return (
                &lt;Col
                  key={guid()}
                  className=&quot;teamCard mt-2 mb-2 mx-1&quot;             
                  onMouseEnter={() =&gt; [
                    setDisplayGoals(group.goalsDone),
                    setDisplayPoints(group.totalScore),
                    setDisplayMilestones(group.milestonesDone),
                  ]}
                &gt;
                  &lt;Row&gt;
                    {/* &lt;div className=&quot;arrow-down&quot; /&gt; */}
                    &lt;p key={guid}&gt;{seed[index]}&lt;/p&gt;
                  &lt;/Row&gt;
                  &lt;Row&gt;
                    &lt;Col className=&quot;hideSmall&quot;&gt;
                      &lt;img className=&quot;mouseOn&quot; src=&quot;../images/group.png&quot; /&gt;
                      &lt;img
                        className=&quot;mouseOff&quot;
                        src=&quot;../images/groupSelected.png&quot;
                      /&gt;
                    &lt;/Col&gt;
                  &lt;/Row&gt;
                  &lt;p key={guid}&gt;{group.name.slice(0, 14)}&lt;/p&gt;
                &lt;/Col&gt;
              );
            })}
        &lt;/Row&gt;
      &lt;/TeamCardStyle&gt;
    );
  };
  </code></pre>
  <p>This is a snippet of the TopGroups component:
  <a href="https://i.stack.imgur.com/An8wT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/An8wT.png" alt="enter image description here" /></a></p>
  <pre><code>const TopGroups = () =&gt; {
    const currentQTR = `Q${moment().quarter()} ${moment().year()}`;
    const { loading, error, data } = useQuery(GET_GROUP_SCORES, {
      variables: { quarter: currentQTR },
    });
    if (data) {
      const sortedGroups = data.getGroupScores.sort((a, b) =&gt; {
        if (a.totalScore &gt; b.totalScore) {
          return -1;
        }
        if (a.totalScore &lt; b.totalScore) {
          return 1;
        } else {
          return 0;
        }
      });
      const test = data.GoalsDone;
    }
    if (error) {
      return &lt;p&gt;An error has occured&lt;/p&gt;;
    }
    if (loading) {
      &lt;Spinner /&gt;;
    }
  
    const [displayGoals, setDisplayGoals] = useState(&quot;0&quot;);
    const [displayPoints, setDisplayPoints] = useState(&quot;0&quot;);
    const [displayMilestones, setDisplayMilestones] = useState(&quot;0&quot;);
  
    return (
      &lt;div className=&quot;row-12&quot;&gt;
        &lt;TeamCard
          data={data}
          setDisplayGoals={setDisplayGoals}
          setDisplayPoints={setDisplayPoints}
          setDisplayMilestones={setDisplayMilestones}
        /&gt;
  </code></pre>
  <p>I have included a picture of the app when it first loads, I would like those zeros to be the #1 Team's score, in this case it should represent Team Clown Car.</p>