Why is `data.map()` function not working as expected when used with data fetched from an API?

Unable to fix this issue.

Tried {data?.map(person=>{...}
and {data && data.map(person=>{...}

import {useState} from 'react';

const App = () => {
  const [data, setData] = useState({data: []});
  const [isLoading, setIsLoading] = useState(false);
  const [err, setErr] = useState('');

  const handleClick = async () => {
    setIsLoading(true);

    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error(`Error! status: ${response.status}`);
      }

      const result = await response.json();

      console.log('result is: ', JSON.stringify(result, null, 4));

      setData(result);
    } catch (err) {
      setErr(err.message);
    } finally {]
      setIsLoading(false);
    }
  };

  console.log(data);

  return (
    <div>
      {err && <h2>{err}</h2>}

      <button onClick={handleClick}>Fetch data</button>

      {isLoading && <h2>Loading...</h2>}

      {data && data.map((person) => {
        return (
          <div key={person.id}>
            <h2>{person.title}</h2>
            <h2>{person.userId}</h2>
            <br />
          </div>
        );
      })}
    </div>
  );
};

export default App;

Seems like its an empty array in data.

Tried {data?.map(person=>{...}
and {data && data.map(person=>{...} how to fix this? Data array feels like empty but how to add data into array from API.

I checked the endpoint and it is not an array, map function works only for arrays. If you change your endpoint to fetch all posts https://jsonplaceholder.typicode.com/posts it is going to work as expected
If what you need is to display post data, using map is totally pointless and your component should return this:

return (
<div key={data.id}>
<h2>{data.title}</h2>
<h2>{data.userId}</h2>
<br />
</div>
);