It's a problem to choose Canada the first time. Canada and the US have the same initial code and confusion occurs. Canada is selected only after choosing again.
<PhoneInput
enableSearch={true}
enableAreaCodes={true}
enableAreaCodeStretch={true}
preserveOrder={["enableAreaCodes", "preferredCountries"]}
preferredCountries={["us"]}
country={"us"}
value={data?.gcPhone || ""}
onChange={(phone) => handleProjectChange("gcPhone", phone)}
inputProps={{
name: "gcPhone",
className: "phoneInput",
}}
/>
It's a problem to choose Canada the first time. Canada and the US have the same initial code and confusion occurs. Canada is selected only after choosing again. <PhoneInput enableSearch={true} enableAreaCodes={true} enableAreaCodeStretch={true} preserveOrder={["enableAreaCodes", "preferredCountries"]} preferredCountries={["us"]} country={"us"} value={data?.gcPhone || ""} onChange={(phone) => handleProjectChange("gcPhone", phone)} inputProps={{ name: "gcPhone", className: "phoneInput", }} />