How do i integrate a Make a deposit page using react and nodejs

const {
  models: { Deposit, User },
  sequelize,
} = require("../service/db/sequelize");
const createHttpError =  require("http-errors")
const posite = async (req, res, next) => {
  const { id, account, amount } = req.body;

  try {
    const deposit = await Deposit.create({
      account: account,
      amount: amount,
      userId: id,
    });

    if (!deposit)
      throw createHttpError.InternalServerError("Unable To Create Deposit");

    res.send({
      status: 200,
      deposit: deposit,
    });
  } catch (error) {
    next(error);
  }
};

const getDeposits = async (req, res, next) => {
  try {
    const usersData = []
    const deposits = await Deposit.findAll();
    if (!deposits) throw createHttpError.InternalServerError();
    
    deposits.map(user => {
      const userDetail = {
        ...user.dataValues,
        createdAt: new Date(user.createdAt).toDateString()
      }
      usersData.push(userDetail)
    })

    res.send({
      status: 200,
      deposits: usersData,
    });
  } catch (error) {
    next(error);
  }
};

const getUserDepsoits = async (req, res, next) => {
  const { id } = req.payload.dataValues;
  const usersData = []
  try {
    const user = await User.findByPk(id, { include: ["deposits"] });
    if (!user) throw createHttpError.InternalServerError();
    const { deposits } = user;
    const lastDeposit = Number(deposits[deposits.length - 1].amount);
    const allDeposits = [];
    let totalDeposits = 0;
    deposits.map(user => {
      const userDetail = {
        ...user.dataValues,
        createdAt: new Date(user.createdAt).toDateString()
      }
      usersData.push(userDetail)

    })

    await deposits.map((deposit) => {
      return allDeposits.push(Number(deposit.amount));
    });

    totalDeposits = allDeposits.reduce((a, b) => a + b, 0)

    res.send({
      status: 200,
      deposits:usersData,
      depositsAmount: allDeposits,
      lastDeposit:lastDeposit,
      totalDeposits:totalDeposits
    });
  } catch (error) {
    next(error);
  }
};

module.exports = { posite, getDeposits, getUserDepsoits };

import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import Inputs, { SelectInput } from "../../components/inputs/Inputs";
import { StyledDeposit } from "./StyledDeposit";
import loadingSvg from "../../assets/img/loading.svg";
import { Form, Formik } from "formik";
import axios from "axios";
const Deposite = () => {
  const [loading, setLoading] = useState(false);
  const location = useLocation();
  const data = location.state;

  const navigate = useNavigate()
  
  useEffect(() => {
    console.log(data);
  }, []);

  const onSubmit = async (values) => {
    console.log(values);
    try {
      setLoading(true);
      axios
        .post("http://localhost:8660/v1/auth/add/deposit", {
          ...values, id:data.id
        })
        .then((response) => {
          setLoading(false);
         
          if (response.status === 200) {
            navigate("/dashboard");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    } catch (error) {}
  };
  return (
    <StyledDeposit>
      <div className="mkd_intro">
        <p>Make A Deposit</p>
      </div>
      <div>
        <Formik initialValues={data} onSubmit={onSubmit}>
          <Form action="" className="mt-2">
            <div className="grid grid-cols-2 gap-4">
              <div className="wallet">
                <Inputs 
                  type={"text"}
                  id={"account"}
                  label={"Wallet Address"}
                  name={"account"}
                  disabled={"false"}
                />
                <div className="fr_erm"></div>
              </div>
              <div className="wallet">
                <Inputs
                  type={"text"}
                  label={"Amount "}
                  id={"amount"}
                  name={"amount"}
                />
                <div className="fr_erm"></div>
              </div>
            </div>

            <div className="reg_btn flex justify-end mt-8">
              <button type="submit" className="btn">
                Send{" "}
                {loading ? (
                  <img srcSet={loadingSvg} alt="" className="inline" />
                ) : null}
              </button>
            </div>
          </Form>
        </Formik>
      </div>
    </StyledDeposit>
  );
};

export default Deposite;