[Searchprofiler] Spacing between rendered shards (#60238)

* Added unique key and some spacing to rendered shards

* Give key to React.Fragment

Author: jloleysens

x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo } from 'react';
+import React, { memo, Fragment } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { IndexDetails } from './index_details';
@@ -53,13 +53,11 @@ export const ProfileTree = memo(({ data, target, onHighlight }: Props) => {
               </EuiFlexItem>
               <EuiSpacer size="s" />
               <EuiFlexItem grow={false}>
-                {index.shards.map(shard => (
-                  <ShardDetails
-                    key={shard.id[1]}
-                    index={index}
-                    shard={shard}
-                    operations={shard[target]!}
-                  />
+                {index.shards.map((shard, idx) => (
+                  <Fragment key={shard.id[1] + `_${idx}`}>
+                    <ShardDetails index={index} shard={shard} operations={shard[target]!} />
+                    {idx < index.shards.length - 1 ? <EuiSpacer size="s" /> : undefined}
+                  </Fragment>
                 ))}
               </EuiFlexItem>
             </EuiFlexGroup>