I think that the structure that you have here is not optimal for this behavior that you're looking for.

I would suggest doing something like:

function ListItem({ listNumber, listData }) {
  const [currentSection, setCurrentSection] = useState(0);
  
  const totalSections = listData.items.length;
  
  const handleOpenSection = () => {
     const nextSection = currentSection === totalSections ? 0 : currentSection + 1;
     setCurrentSection(nextSection);
  }

  return (
    <div className="List">
      <div className="List-section" onClick={handleOpenSection}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            {currentSection === index && <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
            }
          ))}
        </div>
    </div>
  );
}

As you're handling 4 sections, it would be impossible to implement this behavior using a boolean, so this suggestion uses the position of each section in the items array to see which one is open at the time.

The handleOpenSection function is just a suggestion that seemed fit since you wouldn't want to have a currentSection greater than the total sections that you have. Also this code would show the first section in the first render, which is something you might not want to happen!

This is where I'm getting data from and passing logic to the component.

function App() {
  const data = [
    {
      title: "Build test task",
      items: [
        "Create repositor",
        "Implement designs",
        "Implement functionality",
      ],
    },
    {
      title: "Submit your test task",
      items: [
        "Open email client",
        "Sent link information to careers@cornercasetech.com",
      ],
    },
    {
      title: "Participate in tech interview",
      items: ["Talk with HR", "Talk with Tech team"],
    },
    {
      title: "Reciece anster",
      items: ["Receive answers", "Start your IT career"],
    },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>CCT Lab Process</h1>
      </header>
      <div className="App-content">
      {data.map((dataObject, index) => (
        <ListItem key={index} listData={dataObject} listNumber={index + 1} />
      ))}
      </div>

    </div>
  );
}

And here's where I suppose to be handling the logic for the sections, that if you open one, the previously opened closes and so on.

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}