React Quill Default Value will not display with API call - reactjs

Question

I am using react quill to set an editor. I want to prepopulate the editor with data from my API, However when I use the defaultValue it does not render. I can console.log the data from the API no problem. Here is the code.....
const GET_ISP_ENTRY = gql`
query IspListEntry($ispListEntryId: ID!) {
ispListEntry(id: $ispListEntryId) {
_id
displayName
contactFirstName
contactLastName
contactTitle
lastUpdated
onlineService
onlineAttn
address
city
state
zipCode
country
phoneNumber
extension
mobileNumber
faxNumber
email
website
referTo
notes
previous
}
}
`;
const UPDATE_ISP_ENTRY = gql`
mutation UpdateISPEntry($ispListEntryUpdateId: ID!, $input: UpdateISPEntry) {
ispListEntryUpdate(id: $ispListEntryUpdateId, input: $input) {
displayName
}
}
`;
const UpdateISPEntry = () => {
const [formValues, setFormValues] = useState();
const [urlId, setUrlId] = useState('');
const [notesFromAPI, setNotesFromAPI] = useState();
const [previousState, setPreviousState] = useState();
const [getIsp, { data, loading, error }] = useLazyQuery(GET_ISP_ENTRY, {
variables: {
ispListEntryId: urlId
},
onCompleted: () => {
setNotesFromAPI(data && data.ispListEntry.notes);
},
onError: () => {
toast.error(error);
}
});
console.log(loading ? 'Loading...' : notesFromAPI);
const [
submitValues,
{ data: successful, loading: successLoading, error: loadingError }
] = useMutation(UPDATE_ISP_ENTRY, {
onError: () => {
toast.error(`There was an error ${loadingError}`);
}
});
const params = useLocation();
const path = params.pathname;
const pathSplit = path.split('/')[2];
const [notesState, setNotesState] = useState();
useEffect(() => {
getIsp();
setFormValues(data && data.ispListEntry);
setUrlId(pathSplit);
}, [data, getIsp, pathSplit, formValues]);
const handleSubmit = () => {};
return (
<Fragment>
<div className='container p-4 parent-container'>
<ISPFormHeader />
<ISPFormHeaderPagename children='Update ISP Entry' />
<ISPForm
initialValues={data && data.ispListEntry}
enableReinitialize={true}
onSubmit={handleSubmit}
/>
<div className='editor-fields'>
<EditorComponent
defaultValue={notesFromAPI}
state={notesState}
onChange={setNotesState}
/>
</div>
<div className='editor-fields'>
<EditorComponent
placeholder='Enter Previous Notes Here'
state={previousState}
onChange={setPreviousState}
/>
</div>
</div>
</Fragment>
);
};
export default UpdateISPEntry;
and the Editor Component...
import React from 'react';
import ReactQuill from 'react-quill';
const modules = {
toolbar: [
[{ font: [] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ color: [] }, { background: [] }],
[{ script: 'sub' }, { script: 'super' }],
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ indent: '-1' }, { indent: '+1' }, { align: [] }],
['link', 'image', 'video'],
['clean']
]
};
const EditorComponent = ({ placeholder, state, onChange, defaultValue }) => {
return (
<ReactQuill
defaultValue={defaultValue}
modules={modules}
theme='snow'
placeholder={placeholder}
state={state}
onChange={onChange}
/>
);
};
export default EditorComponent;