How to dynamically populate MUI ToggleButtonGroup?

Question

I'm using MUI for my project which uses a number of ToggleButtonGroup components for navigation. As a reminder, this normally works like this:

   <ToggleButtonGroup
      value={alignment}
      exclusive
      onChange={handleChange}
      aria-label="Platform"
    >
      <ToggleButton value="web">Web</ToggleButton>
      <ToggleButton value="android">Android</ToggleButton>
      <ToggleButton value="ios">iOS</ToggleButton>
    </ToggleButtonGroup>

However, I want to make a reusable ToggleButtonGroup Nav component, that receives the various tab components as props, and generates a ToggleButtonGroup dynamically based on that. So essentially it would work like this:

     <TabSelect >        // my custom ToggleButtonGroup component
       <AccountTab title='Account' />,
       <ProfileTab title='Profile' />
       <NotificationsTab title='Notifications' />
     </TabSelect>

The TabSelect component currently looks something like this:

export function TabSelect(props) {

  const [tabSelect, setTabSelect] = useState("account")

  const handleTabSelect = (
    event: React.MouseEvent<HTMLElement>,
    newTab: string | null
  ) => {
    setTabSelect(newTab)
  }

return (
    <>

        <ToggleButtonGroup
          value={tabSelect}
          exclusive
          size="small"
          onChange={handleTabSelect}
          aria-label="team-tab"
          color="primary"
        >

{props.Children.map((item, index) => (
    <ToggleButton key={index} value={item.title} aria-label="left aligned">
      <Typography>{item.title}</Typography>
    </ToggleButton>
   ))}
        </ToggleButtonGroup>
    
    </>
  )
}

However, this doesn't work. The buttons are not populated with any text and I can't figure out why because the following prints out to console the correct title:

console.log(props.children[0].props.title

I also know that this isn't a limitation with the MUI ToggleButtonGroup component because hardcoding the data seems to work, like so:

const data = [
    { name: "a", title: "hello1" },
    { name: "b", title: "hello2" },
    { name: "c", title: "hello3" }
      ];
    
  
  return (
    <>

        <ToggleButtonGroup
          value={tabSelect}
          exclusive
          size="small"
          onChange={handleTabSelect}
          aria-label="team-tab"
          color="primary"
        >

{data.map((d, i) => (
    <ToggleButton key={i} value={d.title} aria-label="left aligned">
      <Typography>{d.name}</Typography>
    </ToggleButton>
  ))}
        </ToggleButtonGroup>
    
    </>
  )

Any ideas about how I can pass in my tab components as children and have these dynamically generate a togglebuttongroup component so I can make this properly reusable?

Thanks in advance.