when I pass data to a component I get undefined

well,I have Context in nextjs project where I work on modals and I put modal details in the array(modalBase), also I get data from another context(toolsContext) into this context to pass data to components, but When I console data in this context it's given me data but in the components, after passing data to components it gives me undefined, I am confused

  const [data, setData] = useState();
  const [modals, setModals] = useState([]);

  const router = useRouter();
  const query = router.query;

  const { collectionData } = useContext(toolsContext);

  useEffect(() => {
    const getData = async () => {
      const ss = await collectionData(query.taskId);
      setData(ss);
    };
    getData();
  }, []);

  // ======= Modal details
  const modalsBase = [
    {
      name: "collectCreator",
      openStatus: false,
      content: <CollectionForm />,
    },
    {
      name: "taskItemCreator",
      openStatus: false,
      content: <TaskItemForm data={data} />,
    },
    {
      name: "taskCreator",
      openStatus: false,
      content: <TasksForm data={data} />,
    },
    {
      name: "collectionEdit",
      openStatus: false,
      content: <CollectionEditForm data={data} />,
    },
    {
      name: "taskItemEdit",
      openStatus: false,
      content: <TaskItemEditForm />,
    },
    {
      name: "tasksEdit",
      openStatus: false,
      content: <TasksEditForm />,
    },
  ];

I think that I get this problem because I have components in the array and I try to pass data to components

The data is undefined in your components because you're initializing it asynchronously in a useEffect hook, and then immediately using it in your modalsBase array. Remember that useEffect is executed after the component render, and fetching the data is also an asynchronous operation.

This means that when your modalsBase array is being defined, data is still undefined. It only gets a value after the data fetching has completed, and by this time, your modalsBase array has already been defined with undefined data.

To fix this issue, you should move your modalsBase array inside a useEffect hook that has data as a dependency. This way, the array will be redefined every time data changes. Here's how you can do it:

const [modals, setModals] = useState([]);

useEffect(() => {
  const modalsBase = [
    {
      name: "collectCreator",
      openStatus: false,
      content: <CollectionForm />,
    },
    {
      name: "taskItemCreator",
      openStatus: false,
      content: <TaskItemForm data={data} />,
    },
    // ...
  ];

  setModals(modalsBase);
}, [data]);

Now, modalsBase is redefined every time data changes, which includes the initial fetch. The components will receive the updated data correctly.

Also, I recommend initializing data as null instead of undefined to make it more explicit that it is intentionally empty at the start. That way, you can use conditionals to render different things based on whether data is null or has a value. You can do this by changing the line const [data, setData] = useState(); to const [data, setData] = useState(null);.

Remember that this will cause a re-render every time data changes. If data changes frequently, you might want to consider a different approach, such as passing a loading state to the components, or fetching the data inside the components themselves.