Локализация React

Не могу понять, через какой инструмент и каким образом мне локализовать приложение. Проблема в том, что перевод ко мне приходит в виде массива из объектов(JSON):

0: {_id: '5a7a893966105c2e28d87bd1', content: {ar: {title: 'بطاقة براغ السياحية بالتفصيل'}
cs: {title: 'COOLPASS/CARD'}
de: {title: 'COOLPASS/CARD'}
en: {title: 'COOLPASS/CARD'}
es: {title: 'COOLPASS/CARD'}
fr: {title: 'COOLPASS/CARD'}
he: {title: 'פירוט של כרטיס ההנחות של פראג'}
hu: {title: 'A KÁRTYÁRÓL'}
},
type: 'section', menu: true, footer: true, …},

1: {_id: '5a7a8ad266105c2e28d87bda', content: {…}, type: 'item', menu: true, section: '5a7a893966105c2e28d87bd1', …}
2: {_id: '5a7a8aeb66105c2e28d87bdb', content: {…}, type: 'item', footer: true, menu: true, …}
3: {_id: '5a7a8b6c66105c2e28d87bdc', content: {…}, type: 'item', menu: true, footer: true, …}
4: {_id: '5a7a8c1666105c2e28d87bdf', content: {…}, type: 'item', order: '1004', menu: false, …}
5: {_id: '5a7a8bae66105c2e28d87bdd', content: {…}, type: 'item', menu: true, footer: true, …}
6: {_id: '5a7a8bc966105c2e28d87bde', content: {…}, type: 'item', menu: true, footer: false, …}
7: {_id: '5a7a8c3f66105c2e28d87be0', content: {…}, type: 'item', menu: true, footer: false, …}

И я делаю map по этим объектам. Вопрос в том, как мне получить перевод.

Пример кода без локализации:

import {useEffect, useState, useContext} from "react";
import axios from "axios";

const News = () => {
    const [news, setNews] = useState({data: []})
    let order = -1
    const countSymbolInPost = 700



    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(`https://api2.praguecoolpass.com/news/`)
            setNews(result)
            console.log(result)
            }
        fetchData()


    }, [])

    return (
        <div className="content">
            {news.data.slice(0, 2).map(value => {
                order++
                let date = new Date(value.datePublished)
                return (
                    <div className="card-container">
                        <div className="news-image" style={{backgroundImage: `url(${process.env.REACT_APP_STATIC_SERVER}${value.webimages[0]})`, order: order}}>
                            <div className="news-date">{date.getDay() + '.' + date.getMonth() + '.' + date.getFullYear()}</div>
                        </div>
                        <div className="news-content">
                            <h4  className="news-title">{value.content.en.title}</h4>
                            <p className="news-text">
                                <div dangerouslySetInnerHTML={{ __html: value.content[language].text.slice(0, countSymbolInPost)}}/>
                            </p>
                            <a className="read-more">See all</a>
                        </div>

                    </div>
                )
            })}
            <a className="button-container" href="/news">
                <button className="button">See all</button>
            </a>
        </div>
    );
};

export default News;