기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?

이게 제 console인데요
아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요...

뭐가 문제일까요?

import { useReducer, useRef } from "react";

const mockData = [
  {
    id: 1,
    createDate: new Date().getTime(),
    emotionId: 1,
    content: "1번 일기 내용",
  },
  {
    id: 2,
    createDate: new Date().getTime(),
    emotionId: 2,
    content: "2번 일기 내용",
  },
];

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
  }
}

function App() {
  const [data, dispatch] = useReducer(reducer, [mockData]);
  const idRef = useRef(3);

  const onCreate = (createDate, emotionId, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        createDate,
        emotionId,
        content,
      },
    });
  };

  return (
    <>
      <button
        onClick={() => {
          onCreate(new Date().getTime(), 1, "Hello");
        }}>
        일기 추가 테스트
      </button>
    </>
  );
}

export default App;

제 코드도 첨부해봅니다,,,

const [data, dispatch] = useReducer(reducer, mockData);

const [data, dispatch] = useReducer(reducer, mockData);