How to persist the selected fields in MUI autocomplete/text field

Question

I have an autocomplete component in a file like this:

function AutocompleteInput({state, setState, optionstypes}) {
return(
    <Autocomplete
        disablePortal
        id="combo-box-demo"
        multiple={true}
        onChange={(event, newValue) => {
            setState(newValue.map(option => option.value || option + "|"));
        }}
        filterOptions={filterOptions}
        options={optionstypes}
        renderInput={(params) => <TextField {...params} label="Fields"/>}
        />
);

};

Then imported into my main file like this:

<div className={styles.fieldSelection}>
            <AutocompleteInput
                state={selectedFields}
                setState={setFieldsValue}
                optionstypes={options}
           
            />
        </div>

It all works as intended and lets you pick your fields as show in the snip below:

My question is how do I keep the selected fields (GPSPVTX) in the textfield on page reload? I'm using localstorage for other things like this to persist state but I'm not sure actually how to keep the selected fields in the textfield. I've tried passing a params argument into the component to keep the values but that doesn't seem to work. Any help is appreciated thank you!