Reactjs – Connecting Back-end to Front-end

import React from "react";
import client from "../../apis/client";

export default function SignUp() {
  const handleSignup = async (event) => {
    event.preventDefault();

    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;

    const userData = {
      username,
      email,
      password
    };

    try {
      const response = await client.post("/auth/signup", userData);
      console.log("Signup successful", response.data);
    } catch (error) {
      console.error("Error during signup:", error);
    }
  };

  return (
    <form id="signup-form" onSubmit={handleSignup}>
      <h1>Sign up</h1><br />

      <span className="input"></span>
      <input type="text" className="name" placeholder="Full name" required id="username" />
      <span className="input"></span>
      <input type="email" className="email" placeholder="Email address" required id="email" />
      <span id="passwordMeter"></span>
      <input type="password" className="password" id="password" placeholder="Password" />

      <button type="submit"><span>Sign up</span></button>
    </form>
  );
}

const router  =  require('express').Router();
const User = require('../models/User');




// Registering

router.post('/signup',async(req, res) =>{
    const newUser = new User(
        {
            username: req.body.username,
            email: req.body.email,
            password : req.body.password,
            isAdmin : req.body.isAdmin,

        },
    );
    const existingUser = await User.findOne({email:req.body.email})
        if(existingUser){
            return res.status(409).json({error:"user already exists"});
        }
    try{
        const user = await newUser.save();
        res.status(200).json(user);
    }catch(error){  
        res.status(500).json(error);        
    }
    
});



//Loginning In
router.post('/login',async(req,res) =>{
    try{
        const user = await User.findOne({email:req.body.email});
        !user && res.status(401).json('wrong password or username!')

    
        res.status(200).json(user)


    }catch(error){
        res.status(500).json(error)
    }
});

     

module.exports = router;

I’m trying to create the user in the mongoDB as I click the sign-up button. And The first paragraph of the ccode is from the front end (register page) and the code below are my back end api js code which contains post methods and etc

So could someone help with connecting the back end and the front end so i can use the post routes in the back and create a user in mongoDB