Input Loses Focus in react-window Table When Using React Hook Form

[ksyp-7]

I'm using React Hook Form in combination with react-window to render a large HTML table efficiently. Each table row is rendered using the Row component, and inputs are bound to the form's state using register. However, I encounter an issue where the input inside a row loses focus after the first key press, making it difficult to edit values.

Here is the relevant part of my code for the Row component:

`function Row({ index }: ListChildComponentProps) {
const row = allActualData[index];
const {
moduleName,
moduleWeightage,
partnerName,
activityName,
subFacilityName,
activityWeightage,
monthlyPlan,
liqDates,
} = row;

	return (
		<tr>
			{/** Make sure your table rows are the same height as what you passed into the list... */}
			<td
				style={{
					minWidth: '130px',
					textAlign: 'center',
				}}
			>
				{moduleName}
			</td>
			<td
				style={{
					minWidth: '180px',
					textAlign: 'center',
				}}
			>
				{moduleWeightage}
			</td>
			<td
				style={{
					minWidth: '130px',
					textAlign: 'center',
				}}
			>
				{partnerName}
			</td>
			<td
				style={{
					minWidth: '130px',
					maxWidth: '180px',
					textAlign: 'center',
				}}
			>
				{activityName}
			</td>
			<td
				style={{
					minWidth: '200px',
					textAlign: 'center',
				}}
			>
				{subFacilityName}
			</td>
			<td
				style={{
					minWidth: '200px',
					textAlign: 'center',
				}}
			>
				{activityWeightage}
			</td>
			<td
				style={{
					minWidth: '130px',
					textAlign: 'center',
				}}
			>
				{monthlyPlan}
			</td>
			{liqDates &&
				liqDates.map((_, liqIndex) => (
					<td
						key={liqIndex}
						style={{
							minWidth: '130px',
						}}
					>
						<input
							{...register(
								`actualData.${index}.liqDates.${liqIndex}`
							)}
							value={
								getValues(
									`actualData.${index}.liqDates.${liqIndex}`
								) || ''
							} // Get the current value from React Hook Form
							onChange={(e) => {
								const value = e.target.value;
								setValue(
									`actualData.${index}.liqDates.${liqIndex}`,
									value
								); // Update React Hook Form state
							}}
							style={{
								margin: '3px 25px',
								width: '50px',
								padding: '16.5px 14px',
								background: '#FCFCFA',
								border: '1px solid rgba(0, 0, 0, 0.23)',
							}}
						/>
					</td>
				))}
		</tr>
	);
}`

Problem:
When typing into the input field, the focus is lost after the first key press. This behavior seems to occur due to the virtualization logic of react-window, where the Row component is being re-rendered and causing the DOM input element to lose focus

What I've Tried:
Debugging the form state using React Hook Form's getValues and setValue methods.
Ensuring the Row component retains stable keys for rendering.
Checking if react-window is unmounting and remounting rows during re-renders.

Expected Behavior:
Typing in the input field should not lose focus, and the value should be seamlessly updated in React Hook Form's state.

Actual Behavior:
After the first key press, the input field loses focus and interrupts user interaction.

Additional Details:
Inputs are dynamically rendered for each liqDates array element.
I'll attach a video showcasing the behavior for better clarity.
How can I make the input retain focus while still leveraging react-window with React Hook Form?