The other nav link such as about, teachers and courses do not remain highlighted even after clicking on them

import React from 'react';
import { Route, NavLink } from 'react-router-dom'; //import Route to use route path and NavLink to link the routes


//Add components from courses folder in order to have access to them
import HTML from './courses/HTML';
import CSS from './courses/CSS';
import JavaScript from './courses/JavaScript';

const Courses = () => (

  <div className="main-content courses">
    <div className="course-header group">
      <h2>Courses</h2> 
      <ul className="course-nav">
      {/*use nav link to redirect  */}
        <li><NavLink to='/courses/html'>HTML</NavLink></li>
        <li><NavLink to='/courses/css'>CSS</NavLink></li>
        <li><NavLink to='/courses/javascript'>JavaScript</NavLink></li>
      </ul>
    </div>
    {/*Use routes to define routes for courses*/}
    <Route path="/courses/html" component={HTML} />
    <Route path="/courses/css" component={CSS} />
    <Route path="/courses/javascript" component={JavaScript} />
  </div>

);

export default Courses;