问react钩子-表单7，带有自定义输入，空值

EN

export type InputProps = {
  error?: string
} & InputHTMLAttributes<HTMLInputElement>

export const Input: FunctionComponent<InputProps> = ({ error, ...props }) => (
  <input {...props} />
)

<form onSubmit={handleSubmit(onSubmit)}>
  <Input placeholder="https://example.com" error={errors.url?.message} {...register('url')} />
  <input type="submit" />
</form>

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Home`.
    at Input (webpack-internal:///./components/input.tsx:10:11)
    at form
    at div
    at div
    at Home (webpack-internal:///./pages/index.tsx:17:90)
    at App (webpack-internal:///./pages/_app.tsx:11:11)
    at Hydrate (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:30:3)
    at QueryClientProvider (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:47:3)
    at TRPCProvider (webpack-internal:///./node_modules/@trpc/react-query/dist/createHooksInternal-2bef4843.mjs:158:17)
    at WithTRPC (webpack-internal:///./node_modules/@trpc/next/dist/index.mjs:44:83)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:3325)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)