How to change an input component to another input component, like with a tooltip?

[Left-Behind-Sic]

I need to make input component with tooltip, the values ​​for tooltip must be passed for a specific cell from the prepared data.
I made a component, but the input allows enter only one character, and tooltip is not displayed

const TestInput = (data: any, tooltip?: string) => {
  return (
    <Tooltip title={tooltip} arrow>
      {data.focus ? (
        <input
          className='cellComponent'
          type='text'
          value={data.rowData}
          onChange={(e) => data.setRowData(e.target.value)}
        />
      ) : (
        <span className='cellComponent'>{data.rowData}</span>
      )}
    </Tooltip>
  );
};

for (let i = 0; i <= diffInDays; i++) {
    const testColumn = {
      component: (data: any) => TestInput(data, data.rowData[`day-${i}-color`]),
    };

    columns.push({
      ...keyColumn<IMonthPlanRow, `day-${number}`>(`day-${i}`, testColumn),
    })
  }

Thanks for help