I want to build a sidebar component similar to the one in this image: 
Instead of passing the child components as Objects with text values through the props, I'd like to create a separate component for each key-value pair in each element in the list. For example: if the list has 3 elements, there should be 3 components for each element in the list.

Here is my code so far:

### sidebarcomponents.js:

```
import React from 'react'

function SidebarComponents({ name, title, selected, onSelect }) {
  const style = {
    cursor: 'pointer'
  }

  return (
    <div
      name={name}
      title={title}
      style={style}
      onClick={() => {
        if (onSelect) onSelect(name)
      }}
    >

    </div>
  )
}

export default SidebarComponents

```

### sidebar.js:

```

import React, { useEffect, useState } from 'react'
import SidebarComponents from '../../components/Sidebar1/Sidebar'

function Sidebar({ onChange }) {
  const [selectedComponent, setSelectedComponent] = useState({
    componentsName: [
      { name: 'Overview', title: 'Overview' },
      { name: 'SPO2', title: 'SPO2' }
    ]
  })

  return (
    <div>
      {selectedComponent.componentsName.map(componentsName => {
        return (
          <SidebarComponents
            name={componentsName.name}
            title={componentsName.title}
          />
        )
      })}
    </div>
  )
}

export default Sidebar

```

How can I change my code to map a list child components rather than a list of objects that represent them? 

I hope that my question is clear.