I have the following data from JSON that I need to render in the front end of my application:

JSON in Redux Slice

{
    "documentGenerated": [
        {
            "documents": 
                {
                    "documentName": "string",
                    "documentStoreId": {{faker 'random.number'}},
                    "documentTitle": "string"
                }
            ,
            "groupName": "string",
            "groupId": {{faker 'random.number'}}
        }
    ],
}

My console log returns the data correctly from my redux slice which I import into my component, however, when I try to map the data it returns the following error:

Error

TypeError: e.documents.map is not a function at line 63

which corresponds to this line of code in the component:

docGenerated.documents.map((document, documentStoreId) => (

Finally, here is how I am mapping the data within the component:

Component

 const documentGenerated = useSelector(selectDocumentGenerated);

 <Card
                type="default"
                title={(
                  <div>
                    {documentGenerated.map((docGenerated) =>
                      docGenerated.documents.map((document) => (
                        <div>
                          <p key={{ documentStoreId }}>{document.documentName}</p>
                        </div>
                      )),
                    )}
                  </div>
                )}
              />

I'm not sure exactly what I am doing wrong, but I took a look at this example from S/O: React - how to map nested object values? however, I keep running into the same error. I believe that I'm not mapping the documents object correctly within the JSON. Any help in the right direction is greatly appreciated.