Matriz para crear componentes hijos en React

Supongamos que tenemos una matriz con productos:

const prods = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Vamos a mostrar tres componentes Product, pasándoles los datos de nuestra matriz como props. Por ahora no usaremos un bucle, sino que simplemente accederemos a los elementos del array y del objeto:

function App() {
	return <div>
		<Product name={prods[0].name} cost={prods[0].cost} />
		<Product name={prods[1].name} cost={prods[1].cost} />
		<Product name={prods[2].name} cost={prods[2].cost} />
	</div>;
}

Crea un componente User que muestre los datos del usuario en pantalla. Que estos datos sean nombre, apellido, edad. Formatea los datos del usuario en forma de etiqueta tr que contenga tres etiquetas td.

En el componente App se da la siguiente matriz:

const users = [
	{id: id(), name: 'user1', surn: 'surn1', age: 30},
	{id: id(), name: 'user2', surn: 'surn2', age: 31},
	{id: id(), name: 'user3', surn: 'surn3', age: 32},
];

Utilizando esta matriz, muestra tres usuarios. Formatea su visualización como una tabla table.