Type 'string' is not assignable to type 'E164Number' | react-phone-number-input

Question

I'm using a package react-phone-number-input I have 2 files : index.tsx, useLogicRegister.ts

I have provided a part of code where I'm getting an error of Type 'string' is not assignable to type 'E164Number'

I have also tried to parse string into phoneNumber but still not working.

const parsedPhone = parsePhoneNumber(phone) || '';

index.tsx file has UI of phoneInput and useLogicRegister.ts file has an interface of props, hooks and handlePhoneChange method.

Here is UI code part of index.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useLogicRegister } from './useLogicRegister';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const Register: React.FC = () => {
const navigate = useNavigate();
const {     
    firstname,
    lastname,
    email,
    password,
    phone
    } = useLogicRegister(navigate);
}
  return (
               <PhoneInput 
                    rules={{ required: true }}
                    placeholder="Enter phone number"
                    value={phone} 
                    defaultCountry="US" 
                    className="form-control"
                    onChange={handlePhoneChange}                    
                    />
);
};

export default Register;

Here is useLogicRegister.ts

import { useState } from 'react';
import { NavigateFunction } from 'react-router-dom';
import { login } from '../../../store/authSlice';
import { useDispatch } from 'react-redux';

interface useLogicRegisterProps {
    email: string;
    phone: string;
    password: string;
    firstname: string;
    lastname: string;
    handlePhoneChange: (value: string | undefined) => void;
  }

export const useLogicRegister = (navigate: NavigateFunction ): useLogicRegisterProps => {
    const dispatch = useDispatch();
    const [email, setEmail] = useState('');
    const [phone , setPhone]  = useState('');
    const [password, setPassword] = useState('');
    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
  
   
      const handlePhoneChange = (value: string | undefined) => {
        if (value) {
          setPhone(value);
        }
      };
  
    return {
      email,
      phone,
      password,      
      firstname,
      lastname     
    };
  };

Answer 1

You can import E164Number type alias from the "react-phone-number-input" library. Just Update import to import PhoneInput, { type Value } from 'react-phone-number-input'. And use this type in interface

interface useLogicRegisterProps {
    email: string;
    phone: Value;
    password: string;
    firstname: string;
    lastname: string;
    handlePhoneChange: (value: Value | undefined) => void;
}

And also update types in implementation, like this

const useLogicRegister = (): useLogicRegisterProps => {
    const [phone, setPhone] = React.useState('' as Value)

    const handlePhoneChange = (value: Value | undefined) => {
        if (value) {
            setPhone(value)
        }
    }

    return {
        phone,
        handlePhoneChange,
    }
}