On disabling row click in Fluent UI Details, its not letting to input texts to customized text field in the grid

Fluent UI details list has the default behavior that if we click anywhere on the row that row gets selected. Now I have disabled that feature. Also the Fluent UI details list I have customized with Free text field for a column to input dynamic texts. Now the problem is when I have disabled the row selection feature, its not letting me to add text to the field, it is having unusual behavior. I have used this to disable row based selection:

private renderRow(props: IDetailsRowProps) {
    return <DetailsRow rowFieldsAs={this.renderRowFields} {...props} />;
  }

  private renderRowFields(props: IDetailsRowFieldsProps) {
    return (
      <span data-selection-disabled={true}>
        <DetailsRowFields {...props} />
      </span>
    );
  }

enter image description here

Any one can please help me on this?