Issue with Rendering Tab Titles Using flowbite-react Library

I am currently working on a project using the flowbite-react library to create tabs within a Reactjs application. While attempting to display tab titles dynamically using a map loop, I have encountered an issue where the titles are not showing.

Problem Description:

I have a Reactjs component where I conditionally render tabs based on the contentType. When contentType is set to "resources," I map over a content array and attempt to display tab titles and descriptions for each element in the array. However, I am experiencing difficulties with the titles not showing up.

Code Snippet:

{
  this.props.contentType === "resources" && (
    <Tabs.Group aria-label="Pills" style="pills">
      {this.props.content.map((el, i) => {
        return (
          <>
            <Tabs.Item className="Chinmoy" key={i} title={el.label}>
              <p className="">{el.description}</p>
            </Tabs.Item>
          </>
        );
      })}
    </Tabs.Group>
  );
}

Expectation:

I expect the titles to be displayed for each tab, with the el.label values from the content array being used as tab titles, while it works properly on the library documentation on a static jsx code, see here.

Actual Result:

However, the titles are not showing up as expected, and I cannot identify the root cause of this issue.

What I've Tried:

• I have confirmed that the el.label values in the content array are not empty or undefined.
• I've checked the library's documentation, but I couldn't find any specific guidance regarding this issue.

Screenshot:

Start with the provided React component that maps content into flowbite-react Tabs.Group and compare it with the linked static tabs example. Reproduce the missing titles using the supplied content shape, then verify that each mapped tab renders its el.label value and document the cause and result.