I am new to React.js and going through trial and error phase. Am using Github rest api to fetch issues from a specific repo as follows:

const octokit = new Octokit({ auth: `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` });
const response = await octokit.request("GET /repos/{owner}/{repo}/issues", {
  owner: 'octocat',
  repo: 'hello-world'
});

console.log("Github Issues: " + response);

The above works when I run it keeping inside of an async function as follow:

async GetGithubData() {
    const octokit = new Octokit({ auth: `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` });

    const response = await octokit.request("GET /repos/{owner}/{repo}/issues", {
      owner: 'octocat',
      repo: 'hello-world'
    });

    console.log(response);
} 

Now I tried to follow a basic tutorial on using redux for state management React.js Redux and came to this section (reducer.ts under store folder):

const initialState: ArticleState = {
  articles: [
    {
      id: 1,
      title: "post 1",
      body:
        "Quisque cursus, metus vitae pharetra Nam libero tempore, cum soluta nobis est eligendi"
    },
    {
      id: 2,
      title: "post 2",
      body:
        "Harum quidem rerum facilis est et expedita distinctio quas molestias excepturi sint"
    }
  ]
};

This is a basic data structure that I am trying to convert with the data retrieved from Github rest api and getting this error: Module parse failed: Cannot use keyword 'await' outside an async function. I can understand it's a common error but am unable to figure out how I can assign the values of Github data as follows:

const octokit = new Octokit({ auth: `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` });

const response = await octokit.request("GET /repos/{owner}/{repo}/issues", {
   owner: 'octocat',
   repo: 'hello-world'
});

console.log(response);

const initialState: GithubIssuesState = {
  articles: response
};

Is it even possible or I've to make it work in another way?

Update 1: Ok, after few suggestions, specifically by cheesyMan from the comment section, helped me to get a workaround as follows:

const fetchData = useCallback(async () => {
    const octokit = new Octokit({ auth: `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` });
    const response = await octokit.request("GET /repos/{owner}/{repo}/issues", {
      owner: 'octocat',
      repo: 'hello-world'
    });
  
    console.log("Github Issues: " + response.data.map(m => m.id));
    //console.log("Github Issues: Id - " + response.data[0].id + " Url -" + response.data[0].url + " Repo Url - " + response.data[0].repository_url + " Title - " + response.data[0].title);
  }, []);
  
  //UseEffect to call fetchData
  useEffect(() => {
    fetchData()
    
      .catch(console.error);;
  }, [fetchData])

You can see I am able to retrieve data from the rest api and showed in the console of the browser. In the same time, tried the followings to render in the front end as well but it didn't:

  return (
    <div className="Article">
      <div>
        <h1>{ article.title }</h1>
        <p>{ article.body }</p>
        <p>{ fetchData }</p> //Even this one, fetchData(). I guess, this requires to evaluate in another way that I didn't get yet. Something like an any type to assign the values
      </div>
      <button onClick={() => deleteArticle(article)}>Delete</button>
    </div>
  );