Only one prop is able to pass the data - reactjs

Question

When I try to pass props from one component to another, only one of them receives data. I am not able to get "users" details to AccountabilityChart component.
I am only able to get data props but not users props. What is the issue? I am not able to figure it out the behaviour. Can any one explain why this happens and if their is a way to have both the props
const Card = (props: any) => {
useEffect(()=>{
console.log("These are props: ", props);
}, []);
const [selectedOption, setSelectedOption] = useState(null);
return (
<ul>
{props.data.map((item: any, index: any) => (
<React.Fragment key={item.name}>
<li>
<div className="card">
<div className="card-body">
<p>{item.name}</p>
</div>
<div>
<Select
defaultValue={selectedOption}
onChange={handleChange}
className="select"
options={props.users}
/>
</div>
<div></div>
</div>
{item.children?.length && <Card data={item.children} users={[]} />}
</li>
</React.Fragment>
))}
</ul>
);
};
const AccountabilityChartComponent = () => {
const [hierarchy, setHierarchy] = useState([]);
const [users, setUsers] = useState([]);
useEffect(() => {
someApiCall.then(
function success(results) {
setHierarchy(results.entities);
}
);
someApiCall.then(
function success(results: any) {
setUsers(wrapped);
}
);
}, []);
return (
<div className="grid">
<div className="org-tree">
<Card
users={users}
data={hierarchy}
/>
</div>
</div>
);
};
export default AccountabilityChartComponent;
Organizational hierarchy I am trying to create
Console log is called 4 times. It means the state is updated 4 times? Will it effect my performance?