reactjs - Large Screen Icons Not Rendering Unless Small Screen Icons Are Commented Out - Stack Overflow

I'm facing a strange issue with a React component. The component is designed to render icons separately for small and large screens using conditional rendering. However, the large-screen icons don't appear unless I comment out the block of code responsible for rendering the small-screen icons.

Here's my setup:

• The small-screen icons are rendered in a div that is hidden for large screens (lg:hidden), and vice versa for the large-screen icons (lg:flex).
• I'm using TailwindCSS for styling and some custom SVG components for the icons. Here’s a simplified version of my code.

"use client";

import React from "react";

import { SVGS, TechStackCards, Text } from "@devsoul/features";
import { SelectedTechType } from "@devsoul/types";

const TeckStackComponent = () => {
  const [selectedTech, setSelectedTech] = React.useState<SelectedTechType | null>(TechStackCards[0]);
  console.log("