How to get an option after choosing one | Material UI - reactjs

Question

I have the Material UI Country select Autocomplete, but the chosen option is not showing to the frontend, already configured a code to save the option to the server, but failed to show it on the frontend.
CountrySelect.jsx:
export default function CountrySelect({ user, country, setCountry, defaultValue, getOptionLabel }) {
// onChange={(e) => setCountry(e.target.value)}
return (
<Autocomplete
id="country-select-demo"
sx={{ maxWidth: true, background: '#f3f3f4' }}
options={countries}
defaultValue={{ label: `${user.country}` }}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => (
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
alt=""
/>
{option.label} ({option.code}) +{option.phone}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
defaultValue=""
onBlur={(e) => setCountry(e.target.value)}
/>
)}
/>
);
}
const countries = [
// COUNTRIES
];
EditProfile.jsx:
import { useContext, useState } from "react"
import { Context } from "../../context/Context";
import CountrySelect from "../../components/countrySelect/CountrySelect";
export default function Settings() {
const [country, setCountry] = useState("");
const { user, dispatch, isFetching } = useContext(Context);
const handleSubmit = async (e) => {
e.preventDefault();
dispatch({type: "UPDATE_START"})
const updatedUser = {
userId: user._id,
firstName,
lastName,
birthday,
country,
};
try {
const res = await axios.put("/users/"+user._id, updatedUser);
setSuccess(true);
dispatch({ type: "UPDATE_SUCCESS", payload: res.data });
} catch (err) {
dispatch({type: "UPDATE_FAILURE"});
}
};
return(
<form className="settingsForm" onSubmit={handleSubmit}>
<CountrySelect
country={country}
setCountry={setCountry}
defaultValue={user.country} />
</form>
)
}
The code is working fine, I get the user input option saved in the server (Mongodb), but I want to show the option to the frontend like a placeholder or default value! just want to show the chosen option, Now it's only showing Choose a country