I would like to be able to make both data.account and data.assets accessbile individually. The idea is to be able to insert this component into a page where I can say something like:

import UserAccounts from '...';

"This user (**data.account**) owns this number (**data.assets**) of assets".

The following is the component code:

function UserAccounts() {
  const [accounts, setAccounts] = useState();

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicassets/v1/accounts?limit=10'
      );
      const { data } = await res.json();
      setAccounts(data);
    }
    fetchData();
  }, []);

  if (!accounts) {
    return (
      <div>
        <Spinner />
      </div>
    );
  }

  const account = accounts.map((data) => {
    return <>{(data.account, data.assets)}</>;
  });

  return <></>;
}

export default UserAccounts;

the way that it is now, it's pulling the accounts from the api. The problem is that it's not set to return anything. I'm trying to figure out how I can decide which to return based on what I need (data.account or data.assets