Simple card game in react js - reactjs

Question

I'm relatively new to reactjs and I'm trying to essentially make a simple "card game" where two cards go against each other and the higher score wins/stays, and the lower score loses, then the next card comes up against the initial winner. I have made a component that can be changed, but need help implementing it. Any help is appreciated or an example of how I can implement this.
import "./styles.css";
import React from "react";
import styled from "styled-components";
import data0 from "./NFTs/Team1/0.json";
import data1 from "./NFTs/Team1/1.json";
import data2 from "./NFTs/Team1/2.json";
import data3 from "./NFTs/Team1/3.json";
import data4 from "./NFTs/Team2/0.json";
import data5 from "./NFTs/Team2/1.json";
import data6 from "./NFTs/Team2/2.json";
import data7 from "./NFTs/Team2/3.json";
export default function App() {
//enter teams
var matchups = [
[data0, data1, data2, data3], //users 1
[data4, data5, data6, data7] //users 2
];
class Welcome extends React.Component {
render() {
return (
<div className="NFT">
<img
className={this.props.className}
src={this.props.src}
alt="NFT"
/>
<h1 className="nftnum">{this.props.name}</h1>
</div>
);
}
}
const NavBar = styled.div`
width: 100%;
height: 100px;
background: #fff;
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
`;
const TeamName = styled.h1`
font-size: 30px;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
`;
const Logo = styled.img`
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%);
z-index: 1;
width: 25%;
`;
return (
<div className="App">
<Logo src="logo.png" />
<NavBar>
<TeamName>Aids Sack</TeamName>
<TeamName>Balls Tucked</TeamName>
</NavBar>
<div className="nftWrapper">
<Welcome
className="leftNFT"
name={matchups[0][0].name}
src={matchups[0][0].properties.files[0].uri}
/>
<Welcome
className="rightNFT"
name={matchups[1][0].name}
src={matchups[1][0].properties.files[0].uri}
/>
</div>
</div>
);
}