How to get an option after choosing one | Material UI

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