Get a cursor but not document with react

const todoListComponents = useMemo(() => {
    return todoLists?.map((todoList: any) => {
      const color = todoList.color;
      return (
        <div key={todoList._id} style={{ background: color }}>
          {todoList?.todoIds?.map((todoId: string) => {
            const todoDoc = Todos.find({ _id: todoId });
            console.log(todoDoc);
            return <Todo _id={todoId} key={todoId} />;
          })}
        </div>
      );
    });
  }, [todoLists]);

The todoDoc returns cursors so I switched Todos.find({ _id: todoId }); to Todos.find({ _id: todoId }).fetch(); but this returned empty array.

I also tried Todos.findOne({ _id: todoId }) but this return undefined

I thought about using useFind or useTracker but got an error React Hook "useFind" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

What I want is documents and is there anything I can try to get documents? or what kind of facts I should make sure?

@miki11 You need to make sure that you have the data you want to fetch on the client (minimongo). If not, you need to publish and then subscribe to this set of data.