ReactJS: Fetch in bootstrap modal after an initial fetch - reactjs

Question

I have used fetch to render my database in a table, I was trying to use bootstrap modal to render an specific document and edit it to post again in database. I think these two calls to the server overcharge it, and then it can't render the components, I just want to make sure if there is another way to do make the second call. When I run this display the result is:
Unhandled Rejection (TypeError): Failed to fetch
callApi
5 | Accept: "application/json",
6 | };
7 |
8 | const response = await fetch("http://localhost:3002/api" + url, options);
| ^ 9 | const data = await response.json();
10 | return data;
11 |
View compiled
list
.../src/api.js:29
26 | },
27 | sales: {
28 | list() {
29 | return callApi("/sales")
| ^ 30 | },
31 | create(sale) {
32 | return callApi("/sales", {
View compiled
fetchData
.../src/screens/sales/SalesScreen.js:29
26 |
27 | useEffect(() => {
28 | const fetchData = async () => {
29 | const response = await api.sales.list();
| ^ 30 | setSales(response);
31 | console.log(sales);
32 | const responseUsers = await api.users.list();
View compiled
(anonymous function)
.../src/screens/sales/SalesScreen.js:37
34 | console.log(users);
35 | };
36 |
37 | fetchData();
| ^ 38 | }, []);
39 |
40 | return (
View compiled
▶ 11 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.