I want to write a custom React TextField component and I want to add a clear button to this custom component. I added the button but its functionality does not work. I share the call and content of the Custom Component below.

  const { handleSubmit, control, formState } = useForm<SignInModel>({
    resolver: zodResolver(signinSchema),
    defaultValues: signinDefaultValue,
  });

<Controller
                name="email"
                control={control}
                render={({ field: { ref, ...field } }) => (
                  <ValidationTextField
                    label={t("auth.email")}
                    type="email"
                    autoComplete="email"
                    helperText={!!errors.email && (isDirty || isSubmitted) ? String(errors.email.message) : null}
                    {...field}
                  />
                )}
              />

interface ValidationTextFieldProps
  extends Omit<FilledTextFieldProps, "variant"> {}

export function ValidationTextField(props: ValidationTextFieldProps) {
  const [value, setValue] = useState("");


  return (
    <TextField
      required
      margin="normal"
      fullWidth
      helperText={props.helperText}
      error={!!props.helperText}
      onChange={(e) => setValue(e.target.value)}
      value={value}
      FormHelperTextProps={{
        style: { width: "fit-content", marginRight: 0 },
      }}
      InputProps={{
        endAdornment: !!props.value && (
          <IconButton
            aria-label="toggle password visibility"
            onClick={() =>{ setValue("") }}
          >
            <CancelRoundedIcon />
          </IconButton>
        ),
      }}
      {...props}
    />
  );
}