Parece que o estado está sendo duplicado. O componente pai está mantendo o estado da lista de itens e do filtro, e passando o isActivevalor do estado para cada componente filho:

isActive={item.isActive}

Entretanto, o componente filho então duplica esse valor no estado que ele gerencia internamente:

const [activeState, setActiveState] = useState(isActive);

Atualizar esse estado não tem efeito na lista no componente pai.

Em vez de rastrear o estado duplicado no componente filho, passe uma função de retorno de chamada para o componente filho que atualizaria o estado no componente pai. Por exemplo, suponha que o componente pai tenha isto:

const toggleActiveItem = (itemName) => {
  setData(data.map(d => (
    d.name === itemName ? {
      ...d,
      isActive: !d.isActive
    } : d
  )));
};

(Observação: isso é, obviamente, feito à mão livre e não testado com seus dados. Mas o objetivo geral do acima é atualizar o estado para uma nova matriz de itens em que o isActivesinalizador é alternado para o item que corresponde ao especificado.)

Em seguida, passe isso para o componente filho para atualizar esse estado:

isActive={item.isActive}
toggleIsActive={toggleActiveItem}

Então o componente filho pode removê-lo useStatecompletamente e invocar a função de retorno de chamada que foi passada a ele:

const Card = ({
  logo,
  name,
  description,
  isActive,
  toggleIsActive,
  filteredData,
  setFilteredData,
}) => {
  function handleClick() {
    toggleIsActive(name);
  }

  //...

Dessa forma, o estado pai é atualizado e os componentes pai e filho relevantes são renderizados novamente com o novo estado.

Problemas

Você implementou pelo menos alguns antipadrões do React:

1. filteredDataé derivado de "estado", por exemplo, derivado das fontes datae activeFilterdo estado de verdade, e, como tal, filteredDatanão deve ser também um estado do React. Você deve calcular o valor filtrado ao renderizar ou memorizar seu valor. Lembre-se de que implementar um acoplamento useState- useEffecttambém é um antipadrão; em quase 100% dos casos de uso, esse acoplamento deve ser substituído pelo useMemohook.
2. O Cardcomponente não atualiza corretamente a datafonte da verdade no componente pai. Ele recebeu uma isActiveprop, mas também deveria receber um retorno de chamada que trate da atualização do estado no componente pai.

Sugestões de soluções

• Filtre o dataestado para calcular o valor dos dados filtrados derivados.
• Crie um manipulador ativo de alternância que atualize o dataestado e passe isso adiante, Cardem vez do filteredDataestado e do atualizador de estado ( que será removido ).

Exemplo:

function App() {
  const [data, setData] = useState([]);
  const [activeFilter, setActiveFilter] = useState("All");

  // Fetch and set the data.
  useEffect(() => {
    fetch("../data.json")
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error("error", error));
  }, []);

  const filteredData = useMemo(() => {
    return data.filter(item => {
      if (activeFilter === "Active") {
        return item.isActive;
      }
      return true;
    });
  }, [data, activeFilter]);

  const toggleActiveByIndex = (index) => () => {
    setData(data => data.map((item, i) => i === index
      ? { ...item, isActive: !item.isActive }
      : item
    ));
  };

  return (
    <div className="w-full h-full bg-linear-to-b from-[#040918] to-[#091540] py-6 px-3 flex flex-col text-white">
      {/* Header */}
      <Header />

      {/* Options */}
      <Options activeFilter={activeFilter} setActiveFilter={setActiveFilter} />

      {/* Cards */}
      {filteredData.map((item, index) => (
        <Card
          key={item.name}
          item={item}
          toggleActive={toggleActiveByIndex(index)}
        />
      ))}
    </div>
  );
}

const Card = ({ item, toggleActive }) => {
  const { logo, name, description, isActive } = item;

  function handleClick() {
    toggleActive();
  }

  return (
    <div className="bg-neutral-700 p-4 rounded-xl border border-neutral-600 mt-4">
      <div className="flex items-start gap-4">
        {/* Logo */}
        <img src={logo} alt="Extension Image" />

        {/* Name and Description */}
        <div className="flex flex-col gap-2 mb-8">
          <h2 className="font-semibold text-xl">{name}</h2>
          <p className="text-sm font-light">{description}</p>
        </div>
      </div>

      {/* Remove Button */}
      <div className="flex justify-between items-center">
        <div className="border border-neutral-600 rounded-full px-3 py-1 flex items-center justify-center">
          <button>Remove</button>
        </div>

        {/* Is Active Toggle */}
        <div className="flex items-center justify-center">
          <label
            htmlFor={`${name}Toggle`}
            className="flex items-center cursor-pointer "
          >
            <div className="relative">
              <input
                id={`${name}Toggle`}
                type="checkbox"
                className="sr-only"
                onClick={handleClick}
              />
              <div
                className={`flex items-center ${
                  activeState ? "bg-red-400 " : "bg-gray-600 "
                } w-11 h-6 rounded-full transition-all px-[2px]`}
              >
                <div
                  className={`bg-white w-5 h-5 rounded-full ${
                    activeState ? "translate-x-5" : "translate-x-0"
                  } transition-all`}
                ></div>
              </div>
            </div>
          </label>
        </div>
      </div>
    </div>
  );
};