The data is storing in mongodb but i’m not able to fetch it in local host of backend .I’m keep getting this Cannot GET /api/auth/register Error in http://localhost:5000/api/auth/register

import React, { useState } from 'react';
import axios from 'axios';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faCalendarAlt, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import { useNavigate } from 'react-router-dom';
import Popup from './popup'; // Adjusted import statement

const Register = () => {
  const navigate = useNavigate();
  const [name, setName] = useState('');
  const [dob, setDob] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPopup, setShowPopup] = useState(false);
  const [error, setError] = useState('');
const handleSubmit = async (e) => {
    e.preventDefault();
    const userData = {
      name,
      dob,
      email,
      password
    };

    try {
      const response = await axios.post('http://localhost:5000/api/auth/register', userData);
      console.log('Registration successful:', response.data);
      localStorage.setItem('token', response.data.token);
      localStorage.setItem('user', JSON.stringify(response.data.user));
      setShowPopup(true);
      setTimeout(() => {
        setShowPopup(false);
        navigate('/');
      }, 3000);
    } catch (error) {
      console.error('Error registering:', error.response ? error.response.data : error.message);
      setError('Error registering. Please try again.');
    }
  };

  return (
    <div style={{ 
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '100vh',
      width: '100%',
      padding: '0 10px',
      backgroundImage: 'url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg")',
      backgroundPosition: 'center',
      backgroundSize: 'cover'
    }}>
      <style>{`
        @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: "Open Sans", sans-serif;
        }

        .wrapper {
          width: 400px;
          border-radius: 8px;
          padding: 30px;
          text-align: center;
          border: 1px solid rgba(255, 255, 255, 0.5);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
        }

        h3 {
          font-size: 2rem;
          margin-bottom: 20px;
          color: #fff;
        }

        .form-group {
          margin-bottom: 20px;
          position: relative;
          display: flex;
          align-items: center;
        }

        .form-control {
          width: 100%;
          padding: 12px 20px;
          border: none;
          border-bottom: 2px solid rgba(255, 255, 255, 0.5);
          background: transparent; /* Updated to make background transparent */
          color: #fff; /* Text color white */
          font-size: 16px;
          outline: none;
          transition: border-color 0.3s;
        }

        .form-control::placeholder {
          color: #ccc; /* Placeholder color */
        }

        .form-control:focus {
          border-color: #fff;
        }

        .form-group .icon {
          margin-right: 10px;
          color: #ccc;
        }

        .btn {
          background: #fff;
          color: #000;
          font-weight: 600;
          border: none;
          padding: 12px 20px;
          cursor: pointer;
          border-radius: 3px;
          font-size: 16px;
          transition: background 0.3s, color 0.3s;
        }

        .btn:hover {
          background: rgba(255, 255, 255, 0.8);
          color: #000;
        }

        .register-icon {
          color: #fff;
          font-size: 3rem;
          margin-bottom: 10px;
        }
      `}</style>
      <div className="wrapper">
        <FontAwesomeIcon icon={faUserPlus} className="register-icon" />
        <h3>Register</h3>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        {showPopup && <Popup message="Thanks for registering!" onClose={() => setShowPopup(false)} />} {/* Display popup */}
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <FontAwesomeIcon icon={faUser} className="icon" />
            <input
              type="text"
              className="form-control"
              placeholder="Enter name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <FontAwesomeIcon icon={faCalendarAlt} className="icon" />
            <input
              type="date"
              className="form-control"
              placeholder="Enter date of birth"
              value={dob}
              onChange={(e) => setDob(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <FontAwesomeIcon icon={faEnvelope} className="icon" />
            <input
              type="email"
              className="form-control"
              placeholder="Enter email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div className="form-group">
            <FontAwesomeIcon icon={faLock} className="icon" />
            <input
              type="password"
              className="form-control"
              placeholder="Enter password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="btn btn-primary btn-block">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default Register;

This is my code of register.js i am not able to get data in local host of backend i want all the data will be display on local host api