[React, Material-UI] TextFieldのフォーカスが1文字打つたびに外れてしまう

発生している問題・エラーメッセージ

React, Material-UIを使って開発をしています。
Material-UIのTextFieldで1文字打つたびにフォーカスが外れてしまいます。
なお、TextFieldで入力した値はreact-hook-formでwatchしています。
原因、解決方法を教えていただきたいです。

該当のソースコード

react
return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MuiGrid
        container
        xs={7}
        md={8}
        sx={{ m: 'auto' }}
        alignItems="center"
        justifyContent="center">
          <Table aria-label="collapsible table">
            <TableBody>
              <TableRow sx={{ p: 0, height: '56px' }} key={'1'}>
                <TableCell
                  sx={{ p: 1.5, width: '20%' }}
                  component="tr"
                  scope="row">
                  <Typography>割合（%）</Typography>
                </TableCell>
                <TableCell
                  component="tr"
                  scope="row"
                  sx={{
                    p: 1.5,
                    textAlign: 'center',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}>

                  // ここが該当箇所です。
                  // TextFieldで入力した値はreact-hook-formでwatchしています。
                  <TextField
                    label="割合"
                    type="text"
                    margin="normal"
                    sx={{ margin: 0, width: 100 }}
                    inputRef={el => (keyRef.current = el)}
                    {...register('netRate', {
                      pattern: /^[0-9]+$/,
                      setValueAs: value =>
                        !parseInt(value) ? 0 : parseInt(value),
                    })}
                    InputProps={{
                      inputProps: {
                        style: { textAlign: 'right', padding: 10 },
                      },
                    }}
                  />

                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
    </form>
  )
})