Create a HTML ordered list on basis of JSON response in React

Question

I want to create a ordered html list with the JSON response values that I recieve by my backend. I have want to map on the result and per result generate a list item. But when I run this it's only showing 1. with nothing instead of:

1. Started flow version: 1
2. Started flow version: 2

I have the following react code:

const Deployment = (deployment_proces) => {
    Object.values(deployment_proces).map(p => console.log(p))
    const deploymentProcesItems = Object.values(deployment_proces).map(proces => (   
        <li key={proces.id}>
            {proces.message}
        </li>  
    ));
    return (
        <div className='deployment-progress-container'>
            <h6 className='deployment-progress-title'>Deployment progress:</h6>
            <ol className='deployment-progress-list'>
                { deploymentProcesItems }
            </ol>
        </div> 
    )
}

My JSON response is as followes:

[
    {
        "code": 200,
        "id": 2251799813688456,
        "message": "Started flow version: 1",
        "name": ""
    },
    {
        "code": 200,
        "id": 2251799813688479,
        "message": "Started flow version: 1",
        "name": ""
    }
]

The deployment_proces variable is of the type object with as value the above JSON response. So I found a way in this article to convert a object to an array, because a object doesn't have a map function. And when I run the Object.values(deployment_proces).map(p => console.log(p)) it returns the same JSON as above in the console with length: 2 and proto: array(). So it is a array now (right?) and next I want to map on that array using the map function that iterates and creates a <li key={id}>{message}</li> per entry.

Any ideas how to fix this /or advice how I can do it better? Because I feel this is way to complex for a simpel iteration over a list.

EDIT

My deployment_proces variable value is equal to the return value of the DeployComponent function shown below.

const DeployComponent = async (data, basicAuth) => {
    const response = await ApiCall(constants.ENDPOINTS.DEPLOY_COMPONENT, basicAuth, data);
    if(!response.ok) {
        throw new Error('Could not create component.');
    }

    return await HandleCreate(response);
}

const HandleCreate = async response => {
    const result = await response.json();
    if (result) {
        return result;
    } else {
        throw Error('Message invalid response body.');
    }
}

And the code where I use the <Deployment /> component:

const ButtonGroup = ({ data, deployment, basicAuth, doSetDeployment }) => {

  const handleDeployment = async () => {
    if (!data) {
      return
    } 
    var newDeployment = await DeployComponent(data, basicAuth);
    doSetDeployment(newDeployment); 
  }

  const isDisabled = () => {
    if (Array.isArray(data) && data.length > 0) {
      //now the data array has blocks check if the diagram has no errors
      return DiagramHasError(data)
    }
    if (!data) {
      return true;
    }
    if (Array.isArray(data) && data.length === 0) {
      return true;
    }
    return false;
  } 

  return (
      <div className='button-group' >
        {deployment ? <Deployment deployment_proces={deployment} /> : null} 
        <Button className={`btn ${isDisabled() ? 'disabled' : ''}`} color='green' text='Deploy diagram' onClick={() => handleDeployment()} disabled={isDisabled()} />
        <Button className={`btn ${isDisabled() ? 'disabled' : ''}`} text='Save' disabled={isDisabled()} />
      </div>
  )
}

const mapStateToProps = state => ({
  data: state.drawer.data,
  deployment: state.drawer.deployment,
  basicAuth: state.auth.basicAuth
})

const mapDispatchToProps = {
  doSetDeployment: setDeployment
}

export default connect(mapStateToProps, mapDispatchToProps)(ButtonGroup)