How to fix createAsyncThunk requires a string action type and a payloadCreator function in React

import { createAsyncThunk } from '@reduxjs/toolkit';

// Correct syntax:
const fetchUserById = createAsyncThunk(
  'users/fetchById', // 1st arg: string action type prefix
  async (userId, thunkAPI) => { // 2nd arg: payload creator function
    const response = await fetch(`/api/users/${userId}`);
    return await response.json();
  }
);

// Correct - string literal
const fetchUser = createAsyncThunk('users/fetch', async () => { /* ... */ });

// Correct - string variable
const actionPrefix = 'users/fetch';
const fetchUser = createAsyncThunk(actionPrefix, async () => { /* ... */ });

// INCORRECT - number, object, array, etc.
const fetchUser = createAsyncThunk(123, async () => { /* ... */ }); // Error
const fetchUser = createAsyncThunk({ type: 'users/fetch' }, async () => { /* ... */ }); // Error

// Correct - async function
const fetchUser = createAsyncThunk('users/fetch', async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
});

// Correct - function returning a promise
const fetchUser = createAsyncThunk('users/fetch', (userId) => {
  return fetch(`/api/users/${userId}`).then(response => response.json());
});

// INCORRECT - not a function
const fetchUser = createAsyncThunk('users/fetch', fetch(`/api/users/1`)); // Error
const fetchUser = createAsyncThunk('users/fetch', null); // Error
const fetchUser = createAsyncThunk('users/fetch'); // Error - missing second arg

// Correct import for Redux Toolkit
import { createAsyncThunk } from '@reduxjs/toolkit';

// Not from 'redux' or 'redux-thunk' packages

import { createAsyncThunk } from '@reduxjs/toolkit';
import type { AppDispatch, RootState } from './store';

interface User {
  id: number;
  name: string;
}

// With TypeScript types
const fetchUserById = createAsyncThunk<User, number, {
  dispatch: AppDispatch;
  state: RootState;
}>(
  'users/fetchById',
  async (userId, thunkAPI) => {
    const response = await fetch(`/api/users/${userId}`);
    return await response.json() as User;
  }
);

import { createAsyncThunk } from '@reduxjs/toolkit';

// Minimal working example
const testThunk = createAsyncThunk(
  'test/action',
  async () => {
    return 'test data';
  }
);

console.log(testThunk.pending('requestId')); // Should log pending action
console.log(testThunk.fulfilled('result', 'requestId')); // Should log fulfilled action