Adding a Table Row into a Table in React

I am new to React and I am trying to build a very basic timesheet tool, where users can add tasks into the application and save. I am using React as well as Typescript.

So far I have my main component that includes an empty array of tasks and the table. Then inside the table body I have mapped to pull the table rows and a separate component that includes the tags.

At the top of the table I have included a button that when clicked should create a new tasks array (so to not modify the state), then uses the concat method to the state to the new array of items and adds the new task. When the 'add item' button is clicked nothing happens, could someone tell me what I am doing wrong? and if this is the best way to achieve this?

Main Component:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import TableRow from './TableRow';

export default class TimesheetTool extends React.Component<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={() => this.addTask}>Add Task</button>
        <table>
          <thead>
            <th>Project</th>
            <th>Task</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saaturday</th>
            <th>Sunday</th>
          </thead>
          <tbody>
            {this.state.tasks.map(task => <tr key={task}><TableRow /></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

Table Row Component to be added onClick:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';

export default class TableRow extends React.Component<ITimesheetToolProps, {}> {
    public render() {
        return (
           <React.Fragment>
               <td><input type="text" name="project" /></td>
               <td><input type="text" name="task" /></td>
               <td><input type="number" name="mon" /></td>
               <td><input type="number" name="tues" /></td>
               <td><input type="number" name="wed" /></td>
               <td><input type="number" name="thurs" /></td>
               <td><input type="number" name="fri" /></td>
               <td><input type="number" name="sat" /></td>
               <td><input type="number" name="sun" /></td>
           </React.Fragment> 
        )
    }
}