JSX Loop with if else check

I'm struggle with a small problem. Hope someone can help me out here.

This is the normal loop I made:

      { userLinks.map((item, i) => (
        <li key={i.toString()}>
          <a href={item.url} title={item.label}>
            <span>{item.label}</span>
          </a>
        </li>
      ))}

This works good, what I'm trying to do is check if userLinks > item.hideTrial = true And if current user a trial user:

const userdata = {
  userid: 921121,
  name: 'John',
  surname: 'Doe',
  fullname: 'John Doe',
  gender: 'mr',
  trial: true,
  expiredate: '14-07-2021',
};

That this user because it's a trial user, don't show items where item.hideTrial === true

What if tried, but off course without success:

      { userLinks.map((item, i) => {
        if (userdata.trial && item.hideTrial !== true) {
          return (
            <li key={i.toString()}>
              <a href={item.url} title={item.label}>
                <span>{item.label}</span>
              </a>
            </li>
          );
        }
          <li key={i.toString()}>
            <a href={item.url} title={item.label}>
              <span>{item.label}</span>
            </a>
          </li>;
      })}