Atlassian forge exercise error - can't casto rest api result to string

Hi, I’m trying to approach forge. Retrieving the issue key by calling rest api and putting it in the panel. I can’t get it as a string though. I cannot understand. I seem to understand that the json is already parsed (like map I think).
Always it returns two items item and function, it’s normal?
Thank you

import ForgeUI, { render, Fragment, Text, IssuePanel,ModalDialog,Button,useState,Form,Select,Option,useProductContext } from '@forge/ui';
import api, { route } from "@forge/api";
const fetchForIssue = async (issueId) => {
const res = await api.asApp().requestJira(route`/rest/api/3/issue/${issueId}`);
const data = await res.json();
return data.key;
};


const App = () => {
  const [isOpen, setOpen] = useState(false);
  const context = useProductContext();
  const datares = useState(async () => await fetchForIssue(context.platformContext.issueKey));
  console.log( datares)
  return (
    <Fragment>
      <Button text="Show modal" onClick={() => setOpen(true)} />
      <Text content={`${datares[0]`} /> 
      {isOpen && (
        <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
          <Form
            onSubmit={data => {
              setSize(data.size);
              setOpen(false);
            }}
          >
            <Select label="T-shirt size" name="size">
              <Option label="Small" value="small" />
              <Option label="Medium" value="medium" />
              <Option label="Large" value="large" />
            </Select>
          </Form>
        </ModalDialog>
      )}
    </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);