I have no clue why I am getting this error, I believe the logic is fine.

matchData[0] contains this information:

{    players: ["Disguised Lizard", "DrSpiteful"],
    winner: "DrSpiteful",
    scoreDifference: 1
}

Here's the logic containing Match(props) info:

import React from 'react';
import Match from './Match';
import matchData from '../data/matchData';

function MatchList(props) {
  const oneMatch = matchData[0];
  console.log(oneMatch);
  return (
    <section className="PlayerList MatchList">
      <h1>Match list</h1>
      <Match
        players={oneMatch.players}
        winner={oneMatch.winner}
        scoreDifference={oneMatch.scoreDifference}
        />
    </section>
  );
}

export default MatchList;

I am getting an issue with this line of {props.players[0]} <span>vs</span> {props.players[1]} extracted from the code below:

import React from 'react';

function Match(props) {
  return (
    <article className="Match">
      <h1>
        {props.players[0]} <span>vs</span> {props.players[1]}
      </h1>
      {/* To be shown when there is a winner */}
      <h2>
        {props.winner} is the winner by {props.scoreDifference}!
      </h2>
      {/* To be shown when there is no winner */}
      <h2>No winners yet!</h2>
    </article>
  );
}

export default Match;

Can anyone point out to me what I am doing wrong, I honestly don't see the issue.