How would I render data from a Django model with a React frontend?

Question

I'm currently working on a personal portfolio website using Django for the backend and database, and React for all the frontend stuff.

In this program, I have various fields that I would like to update every once in a while; I have Django tables for my education history, my work experiences, my skills, and a table to hold portfolio entries. I'd like to display this information on my React frontend, where I could display a page containing cards with all the portfolio projects I've created, and a page where my work experience, skills, and education history is all displayed.

Using plain Django, I would have simply selected the items from the table in views.py and passed it to the context, rendering the items as needed. With React, I don't know how I would handle such a request.

The way my code currently works, in the React components, I declare objects with the required fields such as

const myExperiences = [{
        name: "Company name",
        title: "job title",
        description: "job description",
        startDate: "start", 
        endDate: "end",
        location: "city, country",
    }]

and I display them by using the map function to put them in the desired format.

This is not ideal as it'd require me to change my source code any time I'd like to add more entries, where I would rather do it from Django admin console.

My other idea was to fetch the data from a Django API, but that seems inefficient, and having to fetch information from 3 different tables every time the page feels like it'd be slow for the user for no reason.

What is the right course of action here? What would you guys suggest?