Column of table from different API (React)

I have to fill the table with data which I have returned from different API : the first from smart contract and the second one from a MySQL table using axios.

Both of the sets of data returned are arrays and each elements with the same id I want to put it into a row.

I succeeded to put the data only from the smart contract.

Here's the code of my component :

function CandidaturesList() {
  const [account, setAccounts] = useState(null);
  const [contract, setContract] = useState(null);
  const [candidatures, setCandidatures] = useState(null);
  const [stateCandidatures, setStateCandidatures] = useState(null);


  useEffect(() => {

    async function fetchData() {
        const web3 = await getWeb3();
        const accounts = await web3.eth.getAccounts();
        const networkId = await web3.eth.net.getId();
        const deployedNetwork = OffreEmploiContract.networks[networkId];
        const instance = new web3.eth.Contract(
          OffreEmploiContract.abi,
          deployedNetwork && deployedNetwork.address,
        );
        setAccounts(accounts);
        setContract(instance);
        const response = await instance.methods.getApply().call({ from: accounts[0] });
        console.log(response);
        setCandidatures(response);
        axios.get('http://localhost:4000/api/getAll').then((res) => {
          setStateCandidatures(res.data);
        })
    }
    fetchData();

  });

  const project = [
    {
      title: "COMPANIES",
      dataIndex: "nomCompagnie",
      align: 'center',
      render: text => (
        <div className="avatar-info">
          <Title level={5}>{text}</Title>
        </div>
      )
    },
    {
      title: "JOB TITLE",
      dataIndex: "titre_poste",
      align: 'center',
      render: text => (
        <>
          <div className="semibold">{text}</div>
        </>)
    },
    {
      title: "STATUS",
      width: "15%",
      dataIndex: "status",
      align: 'center',
      render: text => (
        <>
          <br>{text}</br>
          <br></br>

          <Steps current={1} progressDot={(dot, { status, index }) => (
            <Popover
              content={
                <span>
                  step {index} status: {status}
                </span>
              }
            >
              {dot}
            </Popover>
          )} >
            <Step title="Published" />
            <Step title="Job interview" description="Mon, 18 Apr 2022" />
            <Step title="Waiting for decision" />
            <Step title="Completed" />
          </Steps>,
        </>)
    },
    {
      title: "FINAL DECISION",
      dataIndex: "decision",
      align: 'center',
      render: text => (
        <>
          {
            text === "Valide" || text === "Refused" ?
              <Tag color="cyan">{text}</Tag>
              :
              <Tag icon={<SyncOutlined spin />} color="processing">{text}</Tag>
          }
        </>
      )
    },

  ];

  return (
    <>
      <Card
        bordered={false}
        className="criclebox tablespace mb-24"
        title="Your Candidature"
        extra={
          <>
          </>
        }
      >
        <div className="table-responsive">
          <Table
            columns={project}
            dataSource={candidatures }
            pagination={false}
            className="ant-border-space"
          />
        </div>
      </Card>
    </>
  );
}
export default CandidaturesList;

I must fill the Steps with the state stateCandidatures which is an array of objects , example :

{id: 1, date_entretien: 'Mon Apr 25 2022', status: 'waiting for interview'},
{id: 2, date_entretien: null, status: 'Published'}

and this is an example of the state candidatures :

[ id: '1', nomCompagnie:'Company1', titre_poste: 'manager', decision:'valide', …]
[ id: '2', nomCompagnie:'Company2', titre_poste: 'developer', decision:'processing', …]

and the second problem is i don't know how to fill the steps with those data ( the code shows a static steps)