I need to figure out how to fetch multiple GeoJSON files from my public folder and render the coordinates in a React component. Here is the relevant code snippet:

export const CoordinatesComponent = () => {
  const [data, setData]: any = useState([]);
  const [isLoading, setLoading] = useState(true);
    
  useEffect(() => {
    let isMounted = true;
    const dataPromises = Promise.all([
      fetch("data/boundary.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
      fetch("data/neighborhoods.json", {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }),
    ])
    .then((response) => response.map((a) => a.json()));
    
    const setState = () => {
      if (isMounted) {
        dataPromises.then((a) => setData(a));
        setLoading(false);
      }
      return () => {
        isMounted = false;
      };
    };
    
    setState();
    
  }, []);
    
  if (isLoading) {
    return <div>Loading...</div>;
  }
  return (
    <div>{data}</div> // Just a placeholder.  This array of geoJson objects would be fed into another component
  );
};

While I can do this with a single fetch operation, I am stuggling with getting this to work with Promise.all. When I console.log the data variable I'm seeing an array of undefined objects. Any help would be greatly appreciated!