React rendering an empty page after an Express API call

Question

I am new to React and after peforming a post request with Express my localhost page goes blank, rendering a sort of default HTML blank document. but the call works properly, saving the new document in my DB. Here's my React Component:

import React, { Component } from 'react';
import {
  getTasks,
  addTask,
  updateTask,
  deleteById
} from '../services/api'

class Tasks extends Component {
  state = { tasks: [], currentTask:"" }

  async componentDidMount(){
    try {
      const {data} = await getTasks();
      this.setState({tasks:data});
    } catch(err) {
      console.log(err);
    }
  }

  handleChange = ({currentTarget: input}) => {
    this.setState({currentTask: input.value});
  }

  handleSubmit =(e) => {
    e.preventDefault();
    const existingTasks = this.state.tasks;
    try {
      const {data} = addTask({task: this.state.currentTask});
      const tasks = existingTasks;
      tasks.push(data);
      this.setState({tasks, currentTask:""});
    } catch(err) {
      console.log(err);
    }
  }

  handleUpdate = (currentTask) => {
    const existingTasks = this.state.tasks;
    try {
      const tasks = [...existingTasks];
      const idx = tasks.findIndex((task) => task._id === currentTask);
      tasks[idx] = {...tasks[idx]};
      tasks[idx].state = 1;
      this.setState({tasks});
      updateTask(currentTask);
    } catch(err) {
      this.setState({tasks: existingTasks});
    }
  }

  handleDelete = async(currentTask) => {
    const existingTasks = this.state.tasks;
    try {
      const tasks = existingTasks.filter(task => task._id !== currentTask);
      this.setState({tasks});
      await deleteById(currentTask)
    } catch (error) {
      this.setState({tasks: existingTasks});
    }
  }
}

export default Tasks;

My App.js

import Tasks from './components/Tasks';
import './assets/App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Paper, TextField } from '@material-ui/core';
import { Checkbox, Button} from '@material-ui/core';
import './assets/App.css';

class App extends Tasks{
  state = { tasks: [], currentTask: '' }
  render(){
    const {tasks} = this.state;
    return(
      <div className='App flex'>
        <Paper elevation={3} className='container'>
          <div className='header'>
            TO-DO
          </div>
          <form className='flex margin' onSubmit={this.handleSubmit}>
            <TextField variant='outlined' size='small' style={{width: "80%"}} required={true} placeholder="Next thing to do... 🖊️"
            value={this.state.currentTask}
            onChange={this.handleChange}
            />
            <Button 
            style={{height: "40px"}} color='primary' variant='outlined' type='submit'>
              Add task
            </Button>
            <div>
              {tasks.map((task) => (
                <Paper key={task._id} className='flex task-container'>
                  <Checkbox color='primary'
                  checked={task.state}
                  onClick={() => this.handleUpdate(task._id)}/>
                  <div className={task.state ? 'task_line_through' : 'task'}>{task.name}</div>
                  <Button
                  onClick={() => this.handleDelete(task._id)}>
                    Delete
                  </Button>
                </Paper>
              ))}
            </div>
          </form>
        </Paper>
      </div>
    );
  }
}


export default App;

My services calling my APIs from the BE:

import axios from 'axios';

const PATH = '/api/tasks';

const getTasks = () => axios.get(PATH);
const addTask = name => axios.post(PATH, name);
const updateTask = id => axios.patch(`${PATH}/${id}`);
const deleteById = id => axios.delete(`${PATH}/${id}`);

export {
  getTasks,
  addTask,
  updateTask,
  deleteById
}

The API that triggers the blank page rendering and the one showing the elements

router.route("/").post((req, res) => {
  console.log('Create');
  const taskName = req.body.task;
  console.log(req.body);
  const task = new Task({ name: taskName, state: 0 });
  task.save()
    .then(data => { res.status(200).json(data) })
    .catch(err => res.status(404).json("Error" + err));
});

//READ
router.route("/").get((req, res) => {
  console.log('Read');
  Task.find({ state: 0 })
  .then(data => { res.status(200).json(data) })
  .catch(err => res.status(404).json("Error" + err));
});

My server:

const express = require("express");
const cors = require("cors");
const mongoose = require("mongoose");
const path = require("path");
const routes = require("./routes/loadRoutes")
let v8 = require("v8");
let totalHeapSizeInGB = (((v8.getHeapStatistics().total_available_size) / 1024 / 1024 / 1024).toFixed(2));

console.log(`*******************************************`);
console.log(`Total Heap Size ~${totalHeapSizeInGB}GB`);
console.log(`*******************************************`);

require('log-timestamp');
require("dotenv").config();

const app = express();
var http = require('http').createServer(app);
  
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

//PREFLIGHT REQUEST
app.options('*', cors())

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}, (err) => {
    if (err) {
        console.log("Error connecting to DB...");
        console.log(err)
    }
});
const connection = mongoose.connection;
connection.once("open", () => {
    console.log("DB connection made ...");
})

routes.loadRoutes(app)

const port = process.env.PORT || 8080;
http.listen(port, () => {
    console.log('Server running... on port: ' + port);
})

In my package.json of the client I added this to make react routing with node: "proxy": "http://localhost:8080/"

When I make the call there's rendered one root with this comment:

  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->

I would really appreciate any kind of help, I'm super stuck with it.