I have two React components fetching from a Flask App. One works but one doesn’t

import './Checklist.css'
import { useEffect, useState } from 'react'
import axios from "axios";

const fetchData = (hook) => {
    return axios.get("http://localhost:5000/shopping")
      .then((response) => hook(response.data.shoppingList));
  }

function Checklist() {
    const [shoppingList, setShoppingList] = useState();
        useEffect(() => {
                fetchData(setShoppingList)
              }, []);
    
        return (
            <div className='checklist-div'>
                <header>Shopping List</header>
                <div className='shopping-div'>
                    {shoppingList.map((entry, index) => {
                        if (index % 3) {
                            return (
                                <div className="form-check form-switch" key={index}>
                                    <input className="form-check-input" disabled id={`${entry}-input`} type="checkbox" />
                                    <label className="form-check-label" >{entry}</label>
                                </div>
                            )
                        }
                        return (
                            <div className="form-check form-switch" key={index}>
                                <input className="form-check-input" id={`${entry}-input`} type="checkbox" />
                                <label className="form-check-label" >{entry}</label>
                            </div>
                        )
                    }
                    )};
                </div>
            </div>
        );
    }
    
    export default Checklist;

Checklist is grabbing a json object containing an array from the server but gives a ‘Can’t perform a React state update on a component that hasn’t mounted yet’. I’ve checked and the route used does give the array when accessed directly but my handling of the response in the code is causing problems

    import logo from './logo.svg';
    import { useState, useEffect } from 'react';
    import './ReactLogo.css'
    import axios from "axios";
    
    const fetchData = (hook) => {
        return axios.get("http://localhost:5000/")
          .then((response) => hook(response.data.greeting));
      }
    
        function ReactLogo() {
          const [heartbeat, setHeartbeat] = useState();
          fetchData(setHeartbeat);
        
          return (
            <div className="react-logo-div">
                <img src={logo} className="react-logo" alt="logo" />
                <p>
                  Edit <code>src/ReactLogo.js</code> and save to reload.
                </p>
                <a
                  className="react-logo-link"
                  href="https://reactjs.org"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Learn Unit Tests
                </a>
                <p>
                  {heartbeat}
                </p>
            </div>
          );
        }
    
        export default ReactLogo;

I use the same implementation for reactLogo.js and it works fine just grabbing a JSON string object