I am building a grid box with 6 items that it need to be translated using i18n however I noticed that my code and common.json are breaking up with features arrays of objects to retrieve that to translate. what’s the best way to do this without refactoring my code less dynamically?

const data = [
      {
        id: 1,
        icon: icon1,
        titleKey: 'whatToExpect.features[0].title',
        descriptionKey: 'whatToExpect.features[0].description'
      },
    ];


<Box sx={styles.features}>
  {data.map((item) => (
    <Feature
      className="feature-item"
      key={item.id}
      data={{
        icon: item.icon,
        title: t(item.titleKey),
        description: t(item.descriptionKey)
      }}
    />
  ))}
</Box>

common.json

{
      "whatToExpect": {
        "span": "What to Expect",
        "features": [
          {
            "title": "dfdfdfdf",
            "description": "lorem shshs3h"
          },
          {
            "title": "sdsdsdsd",
            "description": "dff4bjgd3jgj4343y."
          },
        ]
      }
    }