callback ref
組件掛載好後，React會呼叫它，然後取得DOM元素(不需要selector)
react-hook-form的register回傳的ref就是這種
ref object
使用createRef、useRef可以建立ref物件，使用ref.current可以取得值
兩者的差異在於前者被呼叫會回傳一個新的物件(reference不同)，後者則是每次渲染都回傳同個物件(reference一樣)
forwardRef
forwardRef是接收functional component的function，透過它可以將子組件的ref暴露給父組件
常見於深度包裝的組件或HOC

包裝很深的組件怎麼註冊

一些包裝得很深的組件(ex: MUI的組件，或者自己做的組件)配合react-hook-form使用時，可能會遇到明明畫面上顯示的值改變了，但實際上form的值沒有改變的問題，這是因為沒有成功把register回傳值傳給組件

根據官方文件，只要正確地暴露ref給上層組件，就能運作

Props Name: ref
Type: React.Ref
Description: Input reference for hook form to register.

所以要做的就是將組件用forwardRef包起來

const Select = forwardRef(
  <T extends string>(
    { label, children, ...resetProps }: MuiSelectProps<T>,
    ref: ForwardedRef<HTMLInputElement>
  ) => {
    return (
      <>
        <InputLabel shrink style={{ textAlign: "left" }}>
          {label}
        </InputLabel>
        <MuiSelect ref={ref} {...resetProps}>
          {children}
        </MuiSelect>
      </>
    );
  }
);

用起來則會像這樣

<Select
        label="Education"
        displayEmpty
        renderValue={(selected) => {
          return <Typography>{selected}</Typography>;
        }}
        {...register("highestEducation")}
      >
        {educationOptions.map(({ label, value }) => (
          <MenuItem value={value} key={value} style={{ textAlign: "left" }}>
            {label}
          </MenuItem>
        ))}
      </Select>