Reactjs React useRef不使用物料UI文本字段

为什么useRef不能处理Material UI TextField，但可以处理传统的html输入元素

用户界面：

我有一个Textfield输入元素，在它上面我有一个按钮列表（来自拉丁字母表的字母，特殊字符）。我可以在组件第一次渲染时聚焦输入栏，但如果单击输入上方的某个按钮，则焦点不会回到输入栏上

我到目前为止所做的尝试

const Search = (props) => {
  const [searchTerm, setSearchTerm] = useState("");
 

  const inputRef = useRef(null);

  const handleLatinButton = (letter) => {
   inputRef.current.focus();
    setSearchTerm(searchTerm + letter);
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    History.push("/?q=" + searchTerm);
    props.onFormSubmit(searchTerm, optionValue);
    setSearchTerm("");
  };

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const q = params.get("q");
    setSearchTerm(q);
    inputRef.current.focus();
    
  }, []); // Am I missing something here in the array?

JSX

    <Button letter="č" handleLatinButton={handleLatinButton} />
    <Button letter="ḍ" handleLatinButton={handleLatinButton} />
     ... 
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        label="Search..."
        value={searchTerm}
        onChange={handleChange}
        ref={inputRef}
        autoFocus="true"
        InputProps={{
          endAdornment: (
            <InputAdornment position="start">
              <IconButton type="submit">
                <SearchIcon />
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
    </form>

... 

如果我用输入替换TextField，则在单击其中一个拉丁按钮后，焦点会工作