isActive свойство NavLink в react-router-dom

Необходимо понять, как работает свойство isActive для NavLink в react-router-dom

есть код, мне нужно, чтобы когда переменная триггер была false, ссылка не нажималась, но она нажимается, либо свойство не так работает и я чего-то не понял, либо я что-то не так делаю.

import React, {Component} from 'react';
import {NavLink, Link } from 'react-router-dom';
const suppliersArr = ["Google","Apple","Rosneft","apple","google","rosneft","роснефть","Роснефть"];
class search extends Component {
    constructor(props) {
        super(props);
        this.state = {
          inputValue: '',
          isValid: false
        };
        this.controlInput = this.controlInput.bind(this);
        this.checkValid = this.checkValid.bind(this);
    }
controlInput(event) {
    if(suppliersArr.indexOf(event.target.value) !== -1){
        this.setState({
            inputValue: event.target.value,
            isValid: true
        });
    } else {
    this.setState({
            inputValue: event.target.value,
            isValid: false
        });
    }   
    console.log(this.state.isValid)
    console.log(event.target.value);
}
checkValid(){
    return false;
}
render() {
    return ([
        <div>
            <input onChange={(event) => this.controlInput(event)} value={this.state.inputValue} type="text"></input>
            <label>{this.state.inputValue}</label>
        </div>,
        <button onClick={() => console.log(this.state.isValid)}>
            <NavLink  isActive={this.checkValid} to= "/personal">Поиск поставщика</NavLink>
        </button>,
        <button>
            <Link  to="/">Назад</Link>
        </button>
    ]);
}
}
export default search;