React-table on click single row highlight. Disable multiple select

Question

I am working on small function add, edit, delete function in React-table. my codes are running. My issue if the user clicks on the row it gets selected at the same time if you click on another row its get selected but it doesn't disable the previously selected row. Basically, the user can select one row at the time. Disable multiple select.

Also, it would be great if anyone can review my add, update, delete function. Whether it is right approach or not.

Running Code

Answer 1

Fixed

  getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
          return {
            onClick: e => {
              console.log("inside");

              if (rowInfo.index != this.state.rowEdit) {
                this.setState({
                  rowEdit: rowInfo.index,
                  selectedRowIndex: rowInfo.original,
                  selectionChanged: this.state.selectionChanged
                    ? false
                    : true
                });
              } else {
                this.setState({
                  rowEdit: null
                });
              }
              console.log(rowInfo.index);
              console.log(this.state.rowEdit);
            },
            style: {
              background:
                rowInfo.index === this.state.rowEdit ? "#00afec" : "white",
              color:
                rowInfo.index === this.state.rowEdit ? "white" : "black"
            }
          };
        } else {
          return {};
        }
      }}