const Row = ({ index, style }) => {
    const rowRef = useRef(null);
    const handleCandidateDetailsChange = (event, key, i) => {
      console.log("handleCandidateDetailsChange(): ENTER");
      setValues(oldValues => {
        oldValues[i][key] = event.target.value
        return [...oldValues];
      })
      const input = rowRef.current.querySelector(`input[id="${event.target.id}"]`)
      input && input.focus()
      console.log("handleCandidateDetailsChange(): EXIT");
    }
    const el = values[index];
    return (
      <div style={{
        ...style,
        display: 'flex',
        width: '100%',
        justifyContent: 'space-evenly',
        alignItems: 'center'
        
      }}
      key={index}
      ref={rowRef}>
        <div>
          <label
            htmlFor="newQuestion"
            className="field-label"
          >
            Name
          </label>
          <div>
            <input
              key={index * 2}
              type="text"
              className="input-field"
              placeholder="Enter the name "
              id="questiontext"
              value={el.name}
              onChange={e => handleCandidateDetailsChange(e, "name", index)}
            
            />
          </div>
        
        </div>
        
        <div>
          <label
            htmlFor="newQuestion"
            className="field-label"
          >
            Email<span className="mand">*</span>
          </label>
          <div>
            {currentRound === 1 ? (
              <input
                key={index * 3}
                type="email"
                className="input-field"
                placeholder="Enter your email"
                id="emailfield"
                value={el.email}
                onChange={e => handleCandidateDetailsChange(e, "email", index)}
              />) : (
              <select
                type="email"
                className="input-field"
                id="emailfield"
                disabled
                defaultValue={el.email}
              >
                <option value="">Select an email</option>
                {emailIds.map((option) => (
                  <option value={option}>{option}</option>
                ))}
              </select>
            )}
          </div>
        </div>
        
        <div>
          <label
            htmlFor="newQuestion"
            className="field-label"
          >
            Enterprise Candidate ID<span className="mand">*</span>
          </label>
          <div>
            <input
              key={index * 4}
              type="text"
              className="input-field"
              placeholder="Enter the Enterprise Candidate ID"
              id="enterprisecandidate"
              value={el.entCanId}
              onChange={e => handleCandidateDetailsChange(e, "entCanId", index)}
            />
          </div>
        </div>
        <div >
          <button
            style={{
              marginTop: '28px',
              width: '110px'
            }}
            
            className="btn btn-danger"
            onClick={() => removeClick(index)}
          >
            Remove
          </button>
        
        
        </div>
      </div>
    );
  }
The above Row Component is used in react-window's VariableSizeList but loses focus when a single key press event occurs