以下がミニマルな形です。

SimpleSelect.tsx

import { ComponentPropsWithoutRef, forwardRef } from "react"

type Ref = HTMLSelectElement

export type SelectProps = ComponentPropsWithoutRef<"select">

export const SimpleSelect = forwardRef<Ref, SelectProps>(
  ({ name, onChange, ...rest }, ref) => {
    return (
      <select name={name} ref={ref} onChange={onChange} {...rest}>
        <option value="01">北海道</option>
        <option value="02">青森県</option>
        <option value="47">沖縄</option>
      </select>
    )
  }
)
SimpleSelect.displayName = "SimpleSelect"

とりあえず name ,ref , onChange があれば動作します。

また以下のように name ,ref , onChange, onBlur は明示的に記述せずに {...rest} に含めてしまうのもよくやる書き方です

  (rest, ref) => {
    return (
      <select {...rest}>
        <option value="01">北海道</option>
        <option value="02">青森県</option>
        <option value="47">沖縄</option>
      </select>
    )
  }

● register関数 はどのような値に展開されるのか？

React Hook Form で 出てくる register関数 は以下のようなデータが返ってきます。

{ ...register("myName") }

↓

{
	name: 'myName', 
	onChange: ƒ, 
	onBlur: ƒ, 
	ref: ƒ
}

React Hook Form + zodで数値型のselectの空文字対応