[Solved]-Filtering an array of objects into two new arrays and saving each to useState-Reactjs

This will only work if there are just two statuses available: AVAILABLE and ASSIGNED. Modify the if statement if you want to include more statuses.

const units = [
   {id: 1, status: "AVAILABLE"}, 
   {id: 1, status: "ASSIGNED"},
];

const newAvailableUnits = [];
const newAssignedUnits = [];

units.forEach((unit) => {
    if (unit.status === "AVAILABLE") newAvailableUnits.push(unit);
    else newAssignedUnits.push(unit);
})

setAvailableUnits(newAvailableUnits);
setAssignedUnits(newAssignedUnits);

if units is already known before rendering the component you can try this

const [availableUnits, setAvailableUnits] = useState(units.filter((v)=> v.status === "AVAILABLE"));
const [assignedUnits, setAssignedUnits] = useState(units..filter((v)=> v.status === "ASSIGNED"));

if not and it comes from fetching for example

you can try

setAvailableUnits(data.filter((v)=> v.status === "AVAILABLE"));
setAssignedUnits(data.filter((v)=> v.status === "ASSIGNED"));