I currently have code that gets all articles from a CMS, with a number, image and text and based on a true or false, the order of image text gets decided. So a image can be above text or under text. But I want it so it's always: image under - image above - image under - image above, and not that it can be like image under - image under - image top, so it can't be allowed to have imaged under for two articles next to each other.

Does someone have an idea what I can do to accomplish this? My current code:

export const GridArticle = ({ item, idx }) => {
  const img = item.image;

  // If true, image at the top, if false, image at the bottom
  const dataOrder = [true, false];
  dataOrder.sort(() => Math.random() - 0.5);
  console.log(dataOrder[0]);

  return (
    <Wrapper>
      {dataOrder[0] ? (
        <Wrapper>
          <a href={`/articles/${item._meta?.uid}`}>
            <Number>{idx + 1}</Number>
            <ImageWrapper>
              {img && <img src={img.url} alt={img.alt} style={{ marginBottom: '2rem' }} />}
            </ImageWrapper>
            <div>
              <h2>{item.title[0].text}</h2>
              <RichText render={item.intro} />
              <span className="link">Lees verder</span>
            </div>
          </a>
        </Wrapper>
      ) : (
        <Wrapper>
          <a href={`/articles/${item._meta?.uid}`}>
            <Number>{idx + 1}</Number>
            <div>
              <h2>{item.title[0].text}</h2>
              <RichText render={item.intro} />
              <span className="link">Lees verder</span>
            </div>
            <ImageWrapper>
              {img && <img src={img.url} alt={img.alt} style={{ marginTop: '2rem' }} />}
            </ImageWrapper>
          </a>
        </Wrapper>
      )}
    </Wrapper>
  );
};