I'm struggle with createResource

import { createResource, createEffect } from 'solid-js';

function YourAssignments(props: { me?: typeof users.$inferSelect }) {
  // Fetch data using createResource
  const [myBoard, { refetch }] = createResource<ResponseBoardsData>(async () => {
    try {
      const res = await fetch('/api/board/as-assigner');
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await res.json();
      console.log('Fetched data:', data);
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      return { data: [] }; // Return an object with an empty array in case of error
    }
  });

  // Log the data when it changes
  createEffect(() => {
    console.log('myBoard:', myBoard()?.data); // It's return array
  });

  return (
    <>
      {myBoard.loading ? (
        <p>Loading...</p>
      ) : myBoard.error ? (
        <p class="notification is-danger">Error: {myBoard.error.message}</p>
      ) : myBoard() && myBoard().data && myBoard().data.length > 0 ? (
        myBoard().data.map((board) => <Board board={board} />) // not a function 
      ) : (
        <p class="notification is-info">You have no boards.</p>
      )}
    </>
  );
}

import { createResource, createEffect } from 'solid-js';

function YourAssignments(props: { me?: typeof users.$inferSelect }) {
  // Fetch data using createResource
  const [myBoard, { refetch }] = createResource<ResponseBoardsData>(async () => {
    try {
      const res = await fetch('/api/board/as-assigner');
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await res.json();
      console.log('Fetched data:', data);
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      return { data: [] }; // Return an object with an empty array in case of error
    }
  });

  // Log the data when it changes
  createEffect(() => {
    console.log('myBoard:', myBoard()?.data); // It's return array
  });

  return (
    <>
      {myBoard.loading ? (
        <p>Loading...</p>
      ) : myBoard.error ? (
        <p class="notification is-danger">Error: {myBoard.error.message}</p>
      ) : myBoard() && myBoard().data && myBoard().data.length > 0 ? (
        myBoard().data.map((board) => <Board board={board} />) // not a function 
      ) : (
        <p class="notification is-info">You have no boards.</p>
      )}
    </>
  );
}