Is the array undefined because the component is rendering before the data is loaded?

I have imported a set of objects from a separate js file into my main app.js file. I want to map through an array and pass object values ​​as props to separate components. When I run this code, the students array is returned as undefined.

I'm new to React and js, it's a learning project where I'm working with functional components.

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { pupils } from "./pupils"
import PupilCard from "./Components/PupilCard";


const App = () => {



 return (<div>
    {pupils.map(pupil => 
    <PupilCard 
        firstname={pupil.firstname} 
        surname={pupil.surname}
        photo={pupil.photo}
        behaviourPoints={pupil.behaviourPoints}
        assessmentOne={pupil.assessmentOne}
        assessmentTwo={pupil.assessmentTwo}
        assessmentThree={pupil.assessmentThree}  
     />)}

 </div>)}

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

student.js example

const pupils = [
    {
        firstname: "Name",
        surname: "Name",
        photo:"./assets/pupilPhotos/user.png",
        behaviourPoints: 25,
        assessmentOne:70,
        assessmentTwo:60,
        assessmentThree:80        
    },
 {
        firstname: "Name",
        surname: "Name",
        photo:"./assets/pupilPhotos/user.png",
        behaviourPoints: 25,
        assessmentOne:70,
        assessmentTwo:60,
        assessmentThree:80        
    }]