Render Two Lists

Dogendar 🐶 wants to hangout with his friend Dogelina but she is busy with her homework. Her homework is to finish implementation of a React component that renders two lists. Dogendar decides to help her finish homework faster so she can hangout with him.

The component takes a prop usersData which is an array of objects containing information about users. An example array is given below

[
  {
    id: "1",
    name: "Dogendar",
    todos: [
      {
        id: '1',
        data: "Look at some stonks data..."
      },
      {
        id: '2',
        data: "Regret looking at stonks data :P"
      },
      ...more elements
    ],
  },
  ...more elements
]

He is supposed to iterate over the list of users and render the following HTML for each user

<div>
  <!-- Dogendar is user's name in this example -->
  <div>{name}</div>
  <div>
    <!-- First todo -->
    <div>Look at some stonks data...</div>
    <!-- Second todo -->
    <div>Regret looking at stonks data :P</div>
    <!-- More todos from user's todos list... -->
  </div>
</div>

<!-- --> is a comment in HTML. You don't need to use it in actual React component implementation

Help Dogendar finish the component and fulfil these requirements:

• Use keys in lists correctly. There should not be any missing key prop warning
• Render the required list correctly according to specifications given in problem. Also, do not change the data-testid="root" used for root element in code below.

Solve this medium problem to earn  2