I am trying to make a movie suggestion app.

Now, I am trying to fetch movies data using axios in api/index.js, and use that data in movieName.js.

Even though I am calling it only once, why is it called 5 times??

/api/index.js

import axios from "axios";



export const fetchAPI  = async ()=>{
    
    let url = "https://ghibliapi.herokuapp.com/films";
    const data = await axios.get(url);
    console.log("the data we just got is like this", data)
    //why is this one repeated 5 times??
   
    return (
        <h1>
       will put data in here. 
        </h1>

    )
}

movieName.js

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {fetchAPI} from '../../api/index'

function MovieName(){

    let fetchedData = fetchAPI()
    console.log({fetchedData})

    return (
        <div>
        <p>I will implement </p>
        <Link to= '/MovieName'>
        <h1>Search By MovieName</h1>
        </Link>
        <p>here</p>
        
        
        </div>
    )
}



export default MovieName

in the console,

the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9 
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9 
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9 
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9 
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
index.js:9 
the data we just got is like this {data: Array(22), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}

Why is this? And is it worth paying attention to this? How do I fix this?