Using values from one react component to create a ternary statement within another component

I’m going to try my best to explain my issue (I’m fairly new to all of this).

For starters. I have a component called LargestSale24H that returns a card with data from an API. Specifically it returns 3 cards; each showing one of 3 of the largest transactions in the last 24 hours. For each transaction it shows the username, user avatar, amount of transaction and date. Here is that return:

if (buyer != null) {
          return (
            <Container key={sale_id}>
              <Card key={buyer}>
                {/* <Badges account={buyer} /> */}
                <UserAvatars user={buyer} />
                <br></br>
                <br></br>
                <Link href={'/user/' + buyer}>
                  <Button>{buyer}</Button>
                </Link>
                <br></br>
                <br></br>
                {salePrice} {listing_symbol}
                <br></br>
                {parseTimestamp(updated_at_time)}
              </Card>
            </Container>
          );
        }

Additionally, I’ve created another component called Badges which is supposed to take each user, in this case buyer, and find all items that they own. This is what the code for badges looks like.

function Badges({ account }) {
  const [assets, setAssets] = useState<Assets>();

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

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

  return (
    <ul>
      {assets?.collections?.length > 0 &&
        assets.collections.map((collectionParent, index) => {
          return (
            <li key={index}>{collectionParent.collection.collection_name}</li>
          );
        })}
    </ul>
  );
}

export default Badges;

Currently I have Badges commented out from LargestSale24H, when I bring it back, it lists out all the items that the user has. Items look something like 123456789. I’m listing them out only as a test buy ideally I want to create a ternary statement that says something like “if this account has this item in their collection, return A, else return B”. Incase you are wondering why, it’s because I want to return one time of UserAvatar if they own a specific item, otherwise, I want to keep the one that’s listed.

I tried doing this:

 if (<Badges account={buyer} /> == 523252144314) {
          return (
            <Container key={sale_id}>
              <Card key={buyer}>
                <UserAvatars user={buyer} />
                <br></br>
                <br></br>
                <Link href={'/user/' + buyer}>
                  <Button>{buyer}</Button>
                </Link>
                <br></br>
                <br></br>
                {salePrice} {listing_symbol}
                <br></br>
                {parseTimestamp(updated_at_time)}
              </Card>
            </Container>
          );
        }

Now, I didn’t expect that to work but since I’m still learning all this, I figured I’d give this a try. Normally I would be googling this but I don’t exactly know what I have to do. I know that I’m receiving a list item per buy of what they own, that works fine. But What I need to do is basically go through each item and compare it with what’s in the ternary statement basically deciding if it’s true or false. I just don’t know how to do that. I feel like perhaps listing the values is the incorrect thing to do. Perhaps my logic is incorrect and I should be doing something else.