Material-UI, for autocomplete component, how to package as component for parent can invoke?

I try to reuse the select Country example(typescript) on:

Country select example Choose one of the 248 countries.

https://material-ui.com/components/autocomplete/

export default function CountrySelect(p: AutocompleteProps<CountryType, boolean, boolean, boolean>) {
  const classes = useStyles();

  return (
    <Autocomplete
      id="country-select-demo"
      style={{ width: 300 }}
      options={countries as CountryType[]}
      classes={{
        option: classes.option,
      }}
      value = p.value
      onChnage={p.onChange}
      autoHighlight
      getOptionLabel={(option) => option.label}
      renderOption={(option) => (
        <React.Fragment>
          <span>{countryToFlag(option.code)}</span>
          {option.label} ({option.code}) +{option.phone}
        </React.Fragment>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose a country"
          variant="outlined"
          inputProps={{
            ...params.inputProps,
            autoComplete: 'new-password', // disable autocomplete and autofill
          }}
        />
      )}
    />
  );
}

interface CountryType {
  code: string;
  label: string;
  phone: string;
}

I do not know the AutocompleteProps meaning and I do not know how to set this type:

AutocompleteProps<CountryType, boolean, boolean, boolean>

to make sure the parent component can set value and have onChange event.