Make cells in table editable react-virtualized - reactjs

Question

So I created a large list and I can get it to display and all that, but I need it to be editable....
so far I've tried:
putting in an html input tag, which does display but I can't even get the cursor to show in the field when clicking on it.
putting in a TextField element from material-ui... same thing can't edit it, though it does show
I'm not sure if editable fields or even buttons are possible within react-virtualized. Would anybody know? Two images are below of what it looks like now, and what I need it to look and function like
Here is the react-virtualized code
<div style={{ width: "100%", height: "100vh" }}>
<AutoSizer>
{({ width, height }) => (
<List
width={width}
height={height}
rowHeight={cache.current.rowHeight}
deferredMeasurementCache={cache.current}
rowCount={downloadedData.length}
rowRenderer={({ key, index, style, parent }) => {
const translation = downloadedData[index];
return (
<Table
width={width}
height={height}
headerHeight={20}
rowHeight={90}
rowCount={downloadedData.length}
rowGetter={({ index }) => downloadedData[index]}
>
<Column
dataKey="key"
label="Key"
width={.5 * width}
style={{ backgroundColor: 'red', display: 'none ' }}
/>
<Column
dataKey="value"
label="Value"
width={.5 * width}
style={{ backgroundColor: 'blue' }}
/>
</Table>
);
}}
/>
)}
</AutoSizer>
</div>
What it looks like
What I need it to look like