React fetch-api y react table

Estoy tratando de obtener datos y mostrarlos en una tabla de React. No tengo idea de por qué no está funcionando. ¿Alguien podría ayudarme? Obtengo los datos en la respuesta de la red, pero no sé por qué no se muestran en el sitio web. Aquí está mi código:

import React, { useState, useEffect } from "react";
import 'react-table/react-table.css';
import ReactTable from 'react-table';

export default function Traininglist() {
    const [trainings, setTrainings] = useState([]);

    useEffect(() => fetchData(), []);

    const fetchData = () => {
        fetch("https://customerrest.herokuapp.com/api/trainings")
            .then(response => response.json())
            .then(data => setTrainings(data.content))
            .catch(err => console.error(err))
    };

    const columns = [
        {
            title: 'Fecha',
            field: 'date',
        },
        {
            title: 'Duración (min)',
            field: 'duration'
        },
        {
            title: 'Actividad',
            field: 'activity'
        },
     ];

    return (
      <div>
         <h1>Entrenamientos</h1>
         <reacttable filterable="{true}" data="{trainings}" columns="{columns}"></reacttable>
      </div>
    );
}

y aquí puedes ver cómo se ve el formato de los datos: