Display multiple values from file in React

I'm trying to display a checklist using React. So I'm loading a json file that looks something like this: { "todos": [{"id":1,"todo":"Do something nice for someone I care about","completed":true,"userId":26},{"id":2,"todo":"Memorize the fifty states and their capitals","completed":false,"userId":48},{"id":3,"todo":"Watch a classic movie","completed":false,"userId":4}] ,"total":150,"skip":0,"limit":30 } And I'm also using mui's checkboxes. So I want to display a checkbox and its "defaultChecked" should be on when "completed" is true.

I managed to load the json and display checkboxes, but I cant figure out how to display all of them.

Code:

import './App.css';
import React, { Component }  from 'react';
import { Checkbox, FormControlLabel, FormGroup } from '@mui/material';

import data from './todo-list.json';

function App() {
  for(let i = 0; i < data.todos.length; i++) {
    if(data.todos[i].completed) {
      var checkbox = console.log(data.todos[i].id, data.todos[i].todo);
    }
    else {
      console.log(data.todos[i].id, data.todos[i].todo);
    }
  }
  
  return (
    <div>
      <header>
        <FormGroup>
          <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
          <FormControlLabel control={<Checkbox />} label="Label 2" />
        </FormGroup>
      </header>
    </div>
  );
}

export default App;

I managed to load the json and display checkboxes, but I cant figure out how to display all of them.