Mantine UI Phone Number Input with react-phone-number-input

PhoneNumber.tsx

import { Input as MantineInput, TextInput } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { LegacyRef, forwardRef } from "react";
import PhoneInput, { DefaultInputComponentProps, Value } from "react-phone-number-input";
import "react-phone-number-input/style.css";

// eslint-disable-next-line react/display-name
const CustomInput = forwardRef((inputProps: DefaultInputComponentProps, ref: LegacyRef<HTMLInputElement>) => {
  const { error, ...rest } = inputProps;
  return (
    <TextInput
      name="phoneNumber"
      placeholder="+62 xxxx"
      // @ts-ignore
      ref={ref}
      {...rest}
      error={error && error.length > 0 ? true : false}
      required
    />
  );
});

const PhoneNumber = (props: {
  value?: string | Value;
  onChange?: (value: string) => void;
  mantineUseForm?: UseFormReturnType<any>;
  mantineUseFormField?: string;
}) => {
  return (
    <MantineInput.Wrapper mt="md" label="Nomor Telepon" required>
      {props.mantineUseForm ? (
        <PhoneInput
          defaultCountry="ID"
          inputComponent={CustomInput}
          {...props.mantineUseForm.getInputProps(props.mantineUseFormField!)}
        />
      ) : (
        <PhoneInput value={props.value!} onChange={props.onChange!} defaultCountry="ID" inputComponent={CustomInput} />
      )}
      <MantineInput.Error mt={5}>
        {props.mantineUseForm ? props.mantineUseForm.errors[props.mantineUseFormField!] : ""}
      </MantineInput.Error>
    </MantineInput.Wrapper>
  );
};

export default PhoneNumber;