Node Js Fetch request is returning undefined

Question

So I have two routes atm localhost:7000/ and localhost:7000/api/courses

I need to pull data from the /api/courses inside my '/' using a fetch request. And its working sort of atm. But when I log my json data it says undefined.

Currently /api/courses returns a collection of Json objects to its own page /api/courses

courseRouter.route("/courses").get((req, res) => {
    
    let dbContents = {}
    
      const query = {};
      if (req.query.genre) {
        query.genre = req.query.genre;
      }
      Course.find(query, (err, courses) => {
        if (err) {
          return res.send(err);
        }
        return res.json(courses); // This here should be sent back to the '/' right?
      }); 
});

current the / route makes a fetch request; but its undefeined response

app.get('/', function (req, response) {

    response.writeHead(200, {"Content-Type": "text/html"});
    
    let dbContents = [];
    
    fetch('http://localhost:7000/api/courses')
    .then(res => res.json)
    .then(json => {
        console.log(json[0])
        }
    );

--- Redacted to keep brief ---

Any suggestions would be helpful! :D