cache fetchQuery response doesnt work

I am facing the following situation. I am using a Select component that has two params: an *onchange *function that should make a relay request when a user types, and a *data *param to display the result of this request on the select.
My issue is the following: I want to cache the relay request, but I can't use a hook because the fetch function and the returned data should be on the same React component.
Do you have any suggestions? I'll provide the code
```
const { Grid } = materialUI;
const Container: React.FC = ({}) => {
const [showContent, setShowContent] = useState(false);
const [selectedOption, setSelectedOption] = useState>(null);
const [selectData, setSelectData] = useState([]);
const [inputValue, setInputValue] = useState("");
const [loading, setLoading] = useState(false);
useEffect(() => {
if (inputValue?.length > 2) {
setLoading(true);
fetchQuery(
RelayEnvironment,
DefaultSettingsQuery,
defaultSettingNameFilter, {networkCacheConfig: {force: false}}
).subscribe({
next: (data) => {
setSelectData(data.data.defaultSettings);
setLoading(false);
},
});
});
} else setSelectData([]);
}, [inputValue]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
setShowContent(id !== "");
if (id === "") setInputValue("");
}, [id]);
return (



);
};
export default Container;
```