How to build an array of objects in react and pass data as a prop?

Question

    const DATA = [
 { id: "a-0", name: "Eat", completed: "true" },
 { id: "a-1", name: "Sleep", completed: "false" },
 { id: "a-2", name: "Repeat", completed: "false" },
];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
 <App tasks={DATA} />
</React.StrictMode>,
document.getElementById("root")
);
This code is in index.js, if I want to place it in the App.js, what would be the best way to do it?

I want to learn both ways to do it, I understand you can store your array of objects directly in App.js BUT also in index.js, what are the best practices? thanks.