Trying to List An Array Of Events from Wordpress API using Next 14 and react-day-picker

Question

I am trying to display a list of events from my wordpress api (with advanced custom fields) using nextjs and app router. Depending on what day I have selected using a calendar (react-day-picker), The events on that day would be rendered.

I am not exactly sure how to go about with the components. Should I fetch the data in the page I want to display the events along with the calendar? Or should I separate the 2?

In order for me to use useState to store the current selected date, I would need it inside a client component. I tried fetching from a client component ("use client") with useffect but im not getting any data from fetch.

useEffect(() => {
const fetchData = async () => {
  setIsLoading(true);
  setError(null);

  try {
    const response = await fetch(process.env.NEXT_PUBLIC_API);
    if (!response.ok) {
      throw new Error(`Error fetching data: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
    setEvents(data);
  } catch (error) {
    console.error("Error fetching data:", error);
    setError(error.message);
  } finally {
    setIsLoading(false);
  }
};
fetchData();
  }, []); // Empty dependency array ensures data is fetched only once on mount

      return <div>{events && events}</div>;
    };