I'm putting together some panels using the reacharts library, my array that contains all the json is the accounts array, which lists all the accounts that I have within the database. the account array for example comes with the following fields.

Zip code 🇧🇷 "SP" City 🇧🇷 "Sao Paulo"

statusAccount 🇧🇷 "Side dish" type 🇧🇷 "Prospectus"

For example, I wanted to assemble a graph sorted by the "Type" field, for example, I have several types within the company, prospect, contract, among others. Is there any function that can return me like this there are 100 prospect companies, there are 200 with type equal to contract, and so on?

For example, I would like my X axis to show my company types, on the Y axis side it could be a column of company numbers by type. My API is in laravel, it is correctly returning my accounts in json

import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

import { useState, useEffect } from "react";
import axios from "axios";
const endpoint = "http://localhost:8000/api";

function PanelAdmin() {
  const [accounts, setAccounts] = useState([]);
  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpoint}/accounts`);
    setAccounts(response.data);
  };

  // console.log(accounts);
  return (
    

      
        
        
        
        
        
      
    
  );
}

export default PanelAdmin;