Until you edit the post, I will assume that you're trying to map over each key of the grouppedByValue object, and then iterate the array of each grouppedByValue[key].

This is an example:

      {Object.entries(grouppedByValue).map(([key, value], kidx) => (
        <div key={`k-${kidx}`}>
          {value.map((el, idx) => (
            <span key={`el-${idx}`}>{JSON.stringify(el)}</span>
          ))}
        </div>
      ))}

Note that I'm using kidx and idx to give children the necessary keys as requested by React.

This example outputs the whole object, but feel free to extract the necessary information from it.

If you are not familiar with Object.entries(), check out this documentation from MDN.

This is the full implementation based on your sample.

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([key, value], kidx) => (
        <div key={`k-${kidx}`}>
          {value.map((el, idx) => (
            <span key={`el-${idx}`}>{JSON.stringify(el)}</span>
          ))}
        </div>
      ))}
    </div>
  );
}

you can use Object.entries for that in this way

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  console.log(grouppedByValue);
  console.log(Object.keys(grouppedByValue));
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([value, items]) => <div key={value}>
  <div>{value}</div>
   <ul>
     {items.map((item, i) => <li key={i}>Phase :{item.Phase} </li>)
   </ul>
</div>)
    </div>
  );
}

You can use Object.entries to get both key and value at same time.

DOM structure to make similar to OP's screenshot.

import "./styles.css";
import { groupBy } from "lodash";

const data = [
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "20" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "5" },
  { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "20" }
];
export default function App() {
  const grouppedByValue = groupBy(data, "Value");
  console.log(grouppedByValue);
  console.log(Object.keys(grouppedByValue));
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {Object.entries(grouppedByValue).map(([key, value]) => (
        <div>
          <div><strong>{key}</strong></div>
          {value.map((el) => (
            <div>{el.Phase}, {el.Step}, {el.Task}</div>
          ))}
        </div> 
      ))}
    </div>
  );
}