I am using react-native and react-hook-form with react-native-toast-notifications to display errors in my form. I want to trigger a toast.show('my custom message') if there's a particular validation error on the field, the component looks like this:

export default function RegisterScreen(props) {
  // we initialize Toasts
  const toast = useToast();

  // loading state
  const [loading, setLoading] = useState(false);

  // we manage the errors
  const [newError, setNewError] = useState();

  // we setup the use of dispatch
  const dispatch = useDispatch();

  // setup of our form
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();

  // our submit handler
  const onSubmit = async data => {
    setLoading(true);
    setNewError(null);
    console.log(data);
    try {
      await dispatch(authActions.signup(data.email, data.password));
    } catch (err) {
      toast.show(err.message, { type: 'danger', duration: 4000 });
      setLoading(false);
    }
  };
 // returning the view
  return (
    <>
      <ScrollView>
        {errors.email && toast.show('email invalid')}
        <Controller
          control={control}
          rules={{
            required: true,
          }}
          render={({ field: { onChange, onBlur, value } }) => (
            <Input
              placeholder='Solo emails válidos'
              onBlur={onBlur}
              onChangeText={onChange}
              value={value}
              error={errors.email}
              name={t('auth:email')}
              autoFocus
              keyboardType='email-address'
              autoComplete='email'
              autoCorrect={false}
              returnKeyType='next'
              textContentType='emailAddress'
            />
          )}
          name='email'
        />
</>
  );
}

By triggering the error.email I want to render a Toast, but it tells me "Error: Text strings must be rendered within a component.". I tried also {error.email && ()=> toast.show('my message') and it doesn't work also.