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

Question

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

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

該当のソースコード

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>
  )
})

試したこと

以下の方法を試してみましたが、解決できてませんでした。

TextFieldを別コンポーネントにして外に出す
inputProps={{ autoFocus: true }} を追記する
inputRef={input => input && input.focus()}　でフォーカスさせる

Answer 1

自己解決しました。Textfield前後のコンポーネントで余計なレンダリングがされてしまっていたことが原因でした。