问TypeError:无法读取未定义API的属性“ft”

EN

import React, { useEffect, useState } from "react";
import axios from 'axios';

export default function Eredmeny() {

const [data, setData] = useState([]);
const [index, setIndex] = useState(0);



useEffect(() => {
    const load = async () => {
        const {data: { matches } } = await axios( 
            "https://raw.githubusercontent.com/openfootball/football.json/master/2020-21/en.1.json" );
        setData(matches);
        //console.log(data);
    }
    load()
}, [])

const prev = () => {
    if( index >= 10){
    setIndex(index - 10);
    }
}

const next = () => {
    if( index <= data.length-11){
    setIndex(index + 10);
    }
}

if (data.length <= 0) {
    return "Loading..."
}

return(
    <div>
        <h1>
            <button onClick = {prev}>Previous</button>
            {data[index].round}
            <button onClick = {next} >Next</button>
        </h1>

        <h3>
            <p>{data[index].team1} - {data[index].team2}</p>
            {data[index].score.ft[0]} - {data[index].score.ft[1]}
            <p> {data[index+1].team1} - {data[index+1].team2}</p>
            <p> {data[index+2].team1} - {data[index+2].team2}</p>
            <p> {data[index+3].team1} - {data[index+3].team2}</p>
            {data[index+3].score.ft[0]} - {data[index+3].score.ft[1]}
            <p> {data[index+4].team1} - {data[index+4].team2}</p>
            <p> {data[index+5].team1} - {data[index+5].team2}</p>
            <p> {data[index+6].team1} - {data[index+6].team2}</p>
            <p> {data[index+7].team1} - {data[index+7].team2}</p>
            <p> {data[index+8].team1} - {data[index+8].team2}</p>
            <p> {data[index+9].team1} - {data[index+9].team2}</p>

        </h3>

        


    </div>
    
);

}