I am working on a react project where I am using react-virtualized to render a table with columns and I am using a cellRenderer to render data in different cells but I want a Input field in one of the cells so I created a custom cellRenderer to return that component but in the table its showing as object.

Here's my code:

codeDataGetter = ({
      dataKey,
      rowData,
    }) => {
      let dataToReturn = '';
      if (rowData) {
        if (typeof rowData.get === 'function') {
          dataToReturn = rowData.get(dataKey);
        }
        dataToReturn = rowData[dataKey];
      } else dataToReturn = '';
      console.log('codeDataGetter', dataToReturn);
      return (
        <Input
          type='text'
          className='form-control'
          value={dataToReturn}
          placeholder={translateText('Code')}
          onChange={() => this.handleCodeChange(event, index)}
          style={{ height: '70%' }}
        />

      );
    }

Table:

<StyledTable
          height={this.props.height}
          width={this.props.width}
          headerHeight={headerHeight}
          rowHeight={rowHeight}
          rowRenderer={this.rowRenderer}
          rowCount={this.props.codeSets.length}
          rowGetter={({ index }) => this.props.codeSets[index]}
          LoadingRow={this.props.LoadingRow}
          overscanRowCount={5}
          tabIndex={-1}
          className='ui very basic small single line striped table'
          columnsList={columns}
        />

Columns:

const columns = (
        [ <Column
            key={3}
            label='Code'
            dataKey='code'
            width={widthOfEachGrid * 1}
            cellDataGetter={this.codeDataGetter}
          />,
          <Column
            key={4}
            label='Code Description'
            dataKey='code_description'
            width={widthOfEachGrid * 2}
            cellDataGetter={this.codeDescriptionDataGetter}
          />,


        ]
      );

Object... is getting shown in place of Input Box.Any help will be appreciated.