Error trying to connect Airtable with React (loop infinity) - reactjs

Question

I am new with React but not with JS. I am trying to connect Airtable with react JS and Material UI. I have some problems
My App.js function
import "./styles.css";
import { useState } from "react";
import React from "react";
import BooksCard from "./components/BooksCard";
import Grid from "#material-ui/core/Grid";
function App() {
//state
const [dataAirtable, setData] = useState([]);
//1. Copie du state
const dataCopy = [...dataAirtable];
//2. manipulation sur la copie du state
//Get airtable data from a table
fetch(
"https://api.airtable.com/v0/baseID/name_table?api_key=API_KEY"
)
.then((res) => res.json())
.then((res) => {
console.log(res.records);
dataCopy.push(res.records);
setData(dataCopy);
})
.catch((error) => console.log("Erreur", error));
//affichage (render)
return (
<Grid container direction="row" spacing={2}>
{dataAirtable.map((data) => (
<BooksCard {...data.fields} key={data.id} />
))}
</Grid>
);
}
export default App;
My card component:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Grid from "#material-ui/core/Grid";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 20
},
gutterTopAndBottom: {
margin: 20
},
card: {
maxWidth: 345
},
media: {
height: 350
}
}));
function BooksCard({ Residence, Ville, Statut, Adresse, Couverture }) {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid item xs={10}>
<Card className={classes.card}>
<CardActionArea>
<CardMedia
className={classes.media}
image={Couverture}
title="React"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{Residence}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{Ville}
</Typography>
</CardContent>
</CardActionArea>
<CardContent>
<Typography paragraph variant="body2">
{Adresse.length > 150 ? Adresse.slice(0, 150) + `...` : Adresse}
</Typography>
</CardContent>
<CardActions>
<Button size="small" variant="outlined" color="primary">
{Statut}
</Button>
</CardActions>
</Card>
</Grid>
</div>
);
}
export default BooksCard;
I tried to use the setState because I saw that it's better to do like that with react (for the reusability of component ?). Finally, I get an infinite loop or my function BooksCard doesn't read the data I get from airtable.
Could you help me please ?
Best regards