I have a function that uses a React hook to setup an initial array of users. The array subsequently gets rendered on the screen in the form of a list. Every time a button is clicked, a new element is appended to the end of the array. The update gets rendered to the screen correctly.

I also have another component that receives this array and should for now replicate the same behaviour but unfortunately the update does not get rendered. Code for both below.

I've read about shallow and deep copies but seems that's not the cause because it works in the parent component correctly. I specifically initialise a new array in the setUsers hook to create a new reference. Code for both below:

Parent Component

import { Button, List } from "grommet";
import { Add } from "grommet-icons";
import { useState } from "react";

import Pending from "./Pending";

export default () => {
  const [users, setUsers] = useState([
    { key: 1, name: "Alan", amount: 20 },
    { key: 2, name: "Bryan", amount: 30 },
    { key: 3, name: "Chris", amount: 40 },
    { key: 4, name: "Eric", amount: 80 }
  ]);

  return (
    <>
      <Button
        primary
        label="Add"
        icon={<Add />}
        onClick={(e) => {
          const newUser = {
            key: Date.now(),
            name: "Adam",
            amount: 30
          };
          setUsers((oldUsers) => [...oldUsers, newUser]);
        }}
      />
      <List primaryKey="name" secondaryKey="amount" data={users} />
      <Pending data={users} />
    </>
  );
};

Nested Component

import { useState } from "react";
import { List } from "grommet";

export default (props) => {
  const [users] = useState(props.data);

  return (
    <>
      <List primaryKey="name" secondaryKey="amount" data={users} />
    </>
  );
};

Any ideas for what could be causing this. I'm new to React in general so would appreciate an explanation of why this happens on top of an actual solution.