I am making a person website and in the Home page I have a shortened version of my portfolio. What I'm trying to accomplish is to switch the alignment of the image and text each time a component is rendered by the .map() function

This is my code so far

import Image from 'next/image';
import React, { useState } from 'react';
import portoflio from '../../Works/data';

export default function MainWork() {
  const works = portoflio.slice(0, 3);
  const [align, setAlign] = useState(false);
  return (
    <div className="text-center">
      {works.map((work) => {
        setAlign(!align) //The Problem Producing Line
        const { name, text, imageLink, keys } = work;
        return (
          <div className="justify-center flex" key={name}>
            <div className={'w-60 h-60 ' + (align ? null : 'order-2')}>
              <Image
                className={'rounded-xl overflow-hidden w-full h-full'}
                src={'/work/' + imageLink + '.svg'}
                alt={'Image of ' + imageLink}
                width="100%"
                height="100%"
                layout="responsive"
              />
            </div>
            <h1>{name}</h1>
          </div>
        );
      })}
    </div>
  );
}

The ternary operator in Image container should take care of the alignment but the issue I'm facing is that if I try to switch the state every time the loop runs I get this error: I tried to find an image for reference and this is the closest i could find: