How can I change the default item of the category created in the React project

Description:

In my React project, I have a section where I showcase my previous projects. The default selected category here appears as "all". However, due to the large number of projects, for a responsive design and to reduce the need for excessive scrolling by the user, I want to set the default selected category to "UI / UX Design." When the "all" category is selected, it should display all projects.

My Project's Section - Default selection is "all"

Another category selection

Portfolio.jsx :

import React, { useState } from 'react'
import List from './List'
import Items from './Items'
import {projects} from '../../Data'
import "./portfolio.css";
import { AnimatePresence } from 'framer-motion';

const allNavList = ['all', ...new Set(projects.map((project) => project.category))];

console.log(allNavList);

const Portfolio = () => {
    const [projectItems, setMenuItems] = useState(projects);
    const [navList, setCategories] = useState(allNavList);

    const filterItems = (category) => {
        if (category === 'all'){
            setMenuItems(projects);
            return;
        }

        const newProjectItems = projects.filter(
            (item) => item.category === category
        );

        setMenuItems(newProjectItems);
    }

  return (
    <section className='portfolio section' id='work'>
        <h2 className="section__title text-cs">Portfolio</h2>
        <p className="section__subtitle">
            My <span>Cases</span>
        </p>

        <List List={navList} filterItems={filterItems} />

        <div className="portfolio__container container grid">
            <AnimatePresence initial={false}>
                <Items projectItems={projectItems} />
            </AnimatePresence>
        </div>
    </section>
  )
}

export default Portfolio

List.jsx :

import React, { useState } from 'react'

const List = ({ List, filterItems }) => { 
    const [active, setActive] = useState(0);

    return (
      <div className='portfolio__list'>
        {List.map((category, index) => {
          return (
            <button 
            className={`${
                active === index ? 'active-work' : ''
            } portfolio__list-item text-cs`}
             key={index} 
             onClick={() => {
                setActive(index);
                filterItems(category);
            }}
            >
              {category}
            </button>
          );
        })}
      </div>
    );
  };
  

export default List

Items.jsx:

import React from 'react'
import {FaArrowRight} from 'react-icons/fa'
import shapeTwo from "../../assets/shape-2.png"
import {motion} from 'framer-motion';

const Items = ({projectItems}) => {
  return (
    <>
    {projectItems.map((projectItems) => {
        const {id, img, category, title, description} = projectItems;
        return(
            <motion.div 
            layout
            animate={{ opacity:1, scale:1 }}
            initial={{ opacity:0.8, scale:0.6 }}
            exit={{ opacity:0.8, scale:0.6 }}
            transition={{duration: 0.5}}
            className="portfolio__items card card-two" 
            key={id}>
                <div className="portfolio_img-wrapper">
                    <img src={img} alt='' className="portfolio__img" />
                </div>

                <span className="portfolio__category text-cs">{category}</span>
                <h3 className='portfolio__title'>{title}</h3>
                <p className="portfolio__description">{description}</p>

                <a href="" className="link">
                    See Pricing
                    <FaArrowRight className='link__icon'></FaArrowRight>
                </a>

                <img src={shapeTwo} alt="" className="shape c__shape" />
            </motion.div>
        )
    })}
    </>
  )
}

export default Items

Expected Behavior:

The default category option should be "UI/UX Design" when no specific category is selected.

What I Tried:

I tried to change the codes like this but It didn't work for me.

Portfolio.jsx:

const allNavList = ['**UI UX DESIGN**', ...new Set(projects.map((project) => project.category))];

console.log(allNavList);

const Portfolio = () => {
    const [projectItems, setMenuItems] = useState(projects);
    const [navList, setCategories] = useState(allNavList);

    const filterItems = (category) => {
        if (category === '**UI UX DESIGN**'){
            setMenuItems(projects);
            return;
        }

        const newProjectItems = projects.filter(
            (item) => item.category === category
        );

        setMenuItems(newProjectItems);
    }

List.jsx:

const List = ({ List, filterItems }) => { 
    const [active, setActive] = useState(**1**);

A few lines should be changed.

List.jsx

Default active state value should not be 0. For category selection value should be 1. (if you want to make ux/ui category selected)

Set the active state value -1, if you don't want to make any category selected by default

const List = ({ List, filterItems }) => {
  const [active, setActive] = useState(-1);       

Portfolio.jsx

Default projectItems state value should be filtered by ux/ui category.

const Portfolio = () => {
  const [projectItems, setMenuItems] = useState(
    projects.filter((item) => item.category === "ux/ui")
  );
  const [navList, setCategories] = useState(allNavList);

  const filterItems = (category) => {
    if (category === "all") {
      setMenuItems(projects);
      return;
    }

    const newProjectItems = projects.filter(
      (item) => item.category === category
    );

    setMenuItems(newProjectItems);
  };

You can check the working version from CodeSandbox.