How to fetch data from rest api using react axios?

Question

I am new to web development. I have created a database using mongoose and express(Rest API). I want to connect this with my client folder, which is the front-end part. But I am getting errors. This is my user.js from the backend.

const User=require("../model/User");
const router= require( "express").Router();

router.post("/",async (req,res)=>{
    try{
        const newUser=new User({
            name: req.body.name,
            age:req.body.age
        });
        const user=await newUser.save();
        res.status(200).json("Account activated");
    }
    catch(err){
        res.status(400).json(err);
    }
    
});
router.get("/:id",async (req,res)=>{
 
        try{
            const user=await User.findById(req.params.id);
            res.status(200).json(user.name);
         }
         catch(err){
             res.status(500).json(err);
         }
    }
    
)
module.exports =router;

This is my index.js from backend

const express =require( 'express');
const mongoose =require('mongoose');
const dotenv =require( "dotenv");
const UserRoute=require("./routes/user");
const app=express();
dotenv.config();
mongoose.connect(process.env.MONGO_URL,{useNewUrlParser: true},()=>{
    console.log("Database connected successfully!!")
});
app.use(express.json())
app.use("/register",UserRoute);


app.listen(8000,()=> console.log("Server connected!!!"));

This is my User component from the front-end

import React from 'react';
import { useEffect } from 'react';
import axios from 'axios';

export default function User() {
    useEffect(()=>{
        const fetchPosts=async ()=>{
          const res=await axios.get("register/63cac1881a41912c72d734c6");
          console.log(res);
        };
        fetchPosts();
      },[])
    
  return (
    <div>
      <input type="text" placeholder='Enter your name....'/>
      <input type="text" placeholder='Enter your age....' />
    </div>
  )
}

And am getting an error like thisConsole error