diff --git a/packages/core-components/src/layout/SignInPage/customProvider.tsx b/packages/core-components/src/layout/SignInPage/customProvider.tsx
index e8f7d03a1d..76196235ba 100644
--- a/packages/core-components/src/layout/SignInPage/customProvider.tsx
+++ b/packages/core-components/src/layout/SignInPage/customProvider.tsx
@@ -50,10 +50,12 @@ type Data = {
 
 const Component: ProviderComponent = ({ onResult }) => {
   const classes = useFormStyles();
-  const { register, handleSubmit, errors, formState } = useForm<Data>({
+  const { register, handleSubmit, formState } = useForm<Data>({
     mode: 'onChange',
   });
 
+  const { errors } = formState;
+
   const handleResult = ({ userId, idToken }: Data) => {
     onResult({
       userId,
@@ -76,11 +78,11 @@ const Component: ProviderComponent = ({ onResult }) => {
         <form className={classes.form} onSubmit={handleSubmit(handleResult)}>
           <FormControl>
             <TextField
+              {...register({ required: true })}
               name="userId"
               label="User ID"
               margin="normal"
               error={Boolean(errors.userId)}
-              inputRef={register({ required: true })}
             />
             {errors.userId && (
               <FormHelperText error>{errors.userId.message}</FormHelperText>