How can I show the announcement section in the next.js frontend with ACF in the WordPress backend?

At first, install react-modal using the code
“npm i react-modal”
At the backend, create two fields as shown below:

write the code in the announcement.js:
code:

import React, { useState, useEffect } from 'react';
import Modal from 'react-modal';

const Announcements = () => {
  const [announcements, setAnnouncements] = useState([]);
  const [selectedAnnouncement, setSelectedAnnouncement] = useState(null);
  const [modalIsOpen, setModalIsOpen] = useState(false);

  useEffect(() => {
    const fetchAnnouncements = async () => {
      try {
        const res = await fetch('https://wp.jjknowledgebase.com/wp-json/custom/v1/announcements');
        const data = await res.json();
        setAnnouncements(data);
        console.log(data);
      } catch (error) {
        console.error('Error fetching announcements:', error);
      }
    };

    fetchAnnouncements();
  }, []);

  const handleClick = (announcement) => {
    setSelectedAnnouncement(announcement);
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setSelectedAnnouncement(null);
    setModalIsOpen(false);
  };
    // Utility function to format the date
    const formatDate = (dateString) => {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(dateString).toLocaleDateString(undefined, options);
    };

  return (
    <div className="container w-full">
      <h2 className="homepage-titles font-medium text-center">Announcements ({announcements.length})</h2>
      <div className="announcement-mainBox h-[449px] mt-4 rounded-[15px] p-2">
        <div className="custom-maiBoxScroll h-[429px] w-[98%] overflow-y-auto">
          <div className="flex flex-col space-y-4 w-full rounded-lg p-4 pr-0">
            {announcements.map((announcement, index) => {
              if (announcement && typeof announcement === 'object' && announcement.announcements_title) {
                return (
                  <div key={index} className={`announcement-box rounded-[15px] transition-colors py-4 px-6`}>
                    <a
                      href="#"
                      onClick={() => handleClick(announcement)}
                    >
                    <h4 className="announcement-heading h4 text-xl tracking-wide leading-7 w-full">
                       {announcement.announcements_title} || {formatDate(announcement.announcements_date)}
                    </h4>
                    </a>
                  </div>
                );
              }
              return null;
            })}
          </div>
        </div>
      </div>
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        contentLabel="Announcement Modal">
        {selectedAnnouncement && (
          <div className='popup-modal-announcement'>
            <div className='popup-modal-announcement-button'>
            <button className="announcement-button" onClick={closeModal}>
              <img
                alt="no image"
                loading="lazy"
                width="25"
                height="25"
                decoding="async"
                data-nimg="1"
                src="/blogs/closeIcons.png"
              />
            </button>
            </div>
            <div className='announcement-heading-div'>
              <h4 className="announcement-heading">
                {selectedAnnouncement.announcements_title}
              </h4>
            </div>
            <div
              className='announcement-para'
              dangerouslySetInnerHTML={{ __html: selectedAnnouncement.announcements_content }}
            />
          </div>
        )}
      </Modal>
    </div>
  );
};

export default Announcements;

When clicking on the announcement section on the website a new pop-up will shown with the details of the announcements.