Modal not responsive to parent state change

I have a modal which intakes data and displays some of this data on a modal where a user can interact with it. The data is set and the modal is opened through my Starters component via the handleAdd function. The modal then consumes the homeData, set within the handleAdd function. However, upon opening the modal, I see original data from homeData's original state and I do not see the new homeData state set by setHomeData in the handleAdd function. This is odd because my modal does in fact tell me that homeData is the data that handleAdd/setHomeData sets it to when logging this in the modal.

Why is the original data being displayed on the modal instead of new data that I pass into it? How do I fix this?

Here's the code:

Starters, the code that handles the setHomeData call in handleAdd

  const Starters = ({item}) => {
    const handleAdd = (data) => {
      setHomeData(data);
      showHomeModal()
    };

    const data = {
      Name: item.title,
      Stack: item.stack,
      ScheduleName: item.subtitle,
      Track: true,
      TrackString: "true",
    }

    return (
      <Card
        style={{
          marginRight: 10,
          marginBottom: 6
        }}
      >
        <Card.Title
          title={item.title}
          subtitle={`Schedule: ${item.subtitle}`}
          right={() =>
            <IconButton
              icon="plus-circle"
              color="#5F9DA5"
              onPress={() => handleAdd(data)}
            />
          }
          rightStyle={{
            marginBottom: 22
          }}
        />
        // rest of card stuff...
  }

In my HomeScreen I have Starters being rendered like so:

const HomeScreen = () => {
  // some default data
  const [homeData,setHomeData] = useState({
    "ScheduleName": "Everyday",
    "Stack": [
      {
        "amount": "3900",
        "measure": "mg",
        "substance": "Omega3",
        id: "7846365hjbvbert674t"
      },
      {
        "amount": "25",
        "measure": "mg",
        "substance": "B12",
        id: "8r76438hjvfguy"
      },
      {
        "amount": "2",
        "measure": "Tablets",
        "substance": "B-complex",
        id: "783657345634hgvbhjvh"
      },
    ],
    "Name": "Example",
    "Track": false,
    "TrackString": "false",
    "StartDate": new Date().toISOString()
  });
  // data that handleAdd should be setting for the modal
  const itemData = {  
    "Vits": {
      title: "Morning Essentials",
      subtitle: "Everyday",
      stack: [
        {
          substance: "Omega3",
          amount: "3900",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "B12",
          amount: "25",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "B-complex",
          amount: "2",
          measure: "Tablets",
          id: uuidv4()
        }
      ]
    },
    "Vits2": {
      title: "Evening Essentials",
      subtitle: "Everyday",
      stack: [
        {
          substance: "Vitamin C",
          amount: "500",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "Calcium Citrate",
          amount: "500",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "D3",
          amount: "16000",
          measure: "IU",
          id: uuidv4()
        },
        {
          substance: "Magnesium",
          amount: "80",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "Zinc",
          amount: "10",
          measure: "mg",
          id: uuidv4()
        },
        {
          substance: "Multi-vitamin",
          amount: "1",
          measure: "Tablets",
          id: uuidv4()
        }
      ]
    }
  }
  ...
  return (
  ...
      <Portal>
        <HomeStarterModal
          homeModalVisible={homeModalVisible}
          homeData={homeData}
          hideHomeModal={hideHomeModal}
        />
      </Portal>
  ...
      <ScrollView
        horizontal={true}
        style={{
          padding: 6,
          paddingHorizontal: 10
        }}
      >
        <Starters
          item={itemData["Vits"]}
        />
        <Starters
          item={itemData["Vits2"]}
        />
      </ScrollView>
  ...
)