how to make it clean to feed a React template from a local text heavy .json file?

I’m doing an SPA right now and the all thing works well so far. To get different text content and pictures according the view, based on the url path, i pull the data from a .json file, local to the SPA, mean by that i don’t call any API to get data from.

Here’s the structure of that component/layout where i do this templating.
Legal is made of/import HeaderLegal + contentLegal
I call the data into Legal and pass them as props to the 2 other components.

Here’s the code:

// data.json

{  "legals": [
    {
      "id": "pp",
      "title": "Privacy policy",
      "update": "last update: 10/05/2024",
      "section1Ttitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "section1Text1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "section1List": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
      ],
      "section2Ttitle": "Information you choose to give us",
      "section2Text1": "When you use hiko, here are the types of information you chose to give us:",
      "section2List": [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
"Lorem ipsum dolor sit amet, consectetur adipiscing elit",
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      ]
    }
}

// Legal component

import HeaderLegal from "../layouts/HeaderLegal";
import ContentLegal from "../layouts/ContentLegal";

const Legal = () => {
  const { id } = useParams();

  const dataLegal = data.legals.find((legal) => legal.id === id);
  return (
    <div>
      <NavLegals />
      <HeaderLegal title={dataLegal.title} text={dataLegal.update} />
      <ContentLegal
        section_1_title={dataLegal.section1Ttitle}
        section_1_text_1={dataLegal.section1Text1}
        section_1_text_2={dataLegal.section1Text2}
        section_1_list={dataLegal.section1List}
        section_2_title={dataLegal.section2Ttitle}
        section_2_text_1={dataLegal.section2Text1}
        section_2_text_2={dataLegal.section2Text2}
        section_2_list={dataLegal.section2List}
      />
    </div>
  );
};

///
// ContentLegal component (that receives the data as props from Legal)

const ContentLegal = ({
  section_1_title,
  section_1_text_1,
  section_1_text_2,
  section_1_list,
  section_2_title,
  section_2_text_1,
  section_2_text_2,
  section_2_list,
}) => {
  return (
    <div>
      <section>
        <h2>{section_1_title}</h2>
        <p>{section_1_text_1}</p>
        <ul>
          {section_1_list &&
            section_1_list.map((element, index) => {
              return <li key={index}>{element}</li>;
            })}
        </ul>
        <p>{section_1_text_2}</p>
      </section>
      <section>
        <h2>{section_2_title}</h2>
        <p>{section_2_text_1}</p>
        <ul>
          {section_2_list &&
            section_2_list.map((element, index) => {
              return <li key={index}>{element}</li>;
            })}
        </ul>
        <p>{section_2_text_2}</p>
      </section>
    </div>
  );
};

It works but as you can see the list of props passed to ContentLegal is long and will increase using this approach and i think i can do better maybe having each section texts from legals array from data.json as object and looping through, but don’t see how to implement such thing nor see another alternative. It’s kind of dirty like it is right now. Could be definitely better.

Any help and suggestion are welcome.