Making three seperate lists using filter() would be one way to do it. Then you can show them as you need:

export const App = () => {
  const [list, setList] = useState([
    { name: "foo", status: "student" },
    { name: "bar", status: "employed" },
    { name: "foo", status: "unemployed" },
  ])

const students = list.filter(x => x.status === 'student' ).map(x => <Profile... />);
const employed = list.filter(x => x.status === 'employed' ).map(x => <Profile... />);
const unemployed = list.filter(x => x.status === 'unemployed' ).map(x => <Profile... />);

  return (
    <div>
      <div>
        <h1>Students</h1>
         {students}
      </div>
      <div>
        <h1>Employed</h1>
          {employed}
      </div>
      <div>
        <h1>Unemployed</h1>
          {unemployed}
      </div>
    </div>
  )
}

Keep another mapping to your statuses to header values and filter the list according to the statuses.

This would also work.

import { useState } from "react";

const STATUSES = {
  student: "Studnets",
  employed: "Employed",
  unemployed: "Unemployed",
  retired: "Retired"
};

const App = () => {
  const [list, setList] = useState([
    { name: "foo", status: "student" },
    { name: "bar", status: "employed" },
    { name: "foo", status: "unemployed" },
    { name: "baz", status: "student" }
  ]);

  return (
    <div>
      {Object.entries(STATUSES).map(([statusKey, displayValue]) => {
        const data = list
          .filter(({ status }) => status === statusKey)
          .map(({ name, status }, index) => <div>{name}</div>);
        if (data.length > 0) {
          return (
            <div>
              <h1>{displayValue}</h1>
              {data}
            </div>
          );
        }
      })}
    </div>
  );
};

export default App;