[Dúvida] No caso de 2 combos, e o outro desabilitado ou deve carregar valores de acordo com o primeiro selecionado

Salve, Juliano!

Primeiro a gente teria que ajustar o nosso componente de ListaSuspensa pra permitir ser desabilitado:

import './ListaSuspensa.css';

const ListaSuspensa = (props) => {
    return (
        <div className="lista-suspensa">
            <label>{props.label}</label>
            <select
                onChange={(evento) => props.aoAlterado(evento.target.value)}
                required={props.required}
                value={props.value}
                disabled={props.disabled} // agora podemos habilitar ou desabilitar ele
            >
                <option value="">Selecione...</option>
                {props.itens.map((item) => {
                    return <option key={item}>{item}</option>;
                })}
            </select>
        </div>
    );
};

export default ListaSuspensa;

E aí podemos fazer alguma coisa assim:

import React, { useState } from 'react';
import ListaSuspensa from './ListaSuspensa';

const App = () => {
    const [primeiroValor, setPrimeiroValor] = useState('');
    const [segundoValor, setSegundoValor] = useState('');

    // aqui são as opções dinâmicas, baseadas na seleção do primeiro valor
    const [opcoesSegundoCombo, setOpcoesSegundoCombo] = useState([]);

    const [segundoComboHabilitado, setSegundoComboHabilitado] = useState(false);


    const opcoesDinamicas = {
        Categoria1: ['Opção 1A', 'Opção 1B', 'Opção 1C'],
        Categoria2: ['Opção 2A', 'Opção 2B', 'Opção 2C'],
        Categoria3: ['Opção 3A', 'Opção 3B', 'Opção 3C'],
    };

    const aoAlterarPrimeiroCombo = (valorSelecionado) => {
        setPrimeiroValor(valorSelecionado);

        if (valorSelecionado) {
            // se a gente tem algum valor, pegamos das opcoesDinamicas (ou de uma API) as novas opções
            setOpcoesSegundoCombo(opcoesDinamicas[valorSelecionado] || []);
            setSegundoComboHabilitado(true);
        } else {
            // se não tem valor, desabilita de novo o combo 2
            setOpcoesSegundoCombo([]);
            setSegundoComboHabilitado(false);
        }
        setSegundoValor('');
    };
    const aoAlterarSegundoCombo = (valorSelecionado) => {
        setSegundoValor(valorSelecionado);
    };

    return (
        <div>
            <h1>Seleção Dinâmica com Lista Suspensa</h1>

            <ListaSuspensa
                label="Primeiro Combo"
                itens={['Categoria1', 'Categoria2', 'Categoria3']}
                aoAlterado={aoAlterarPrimeiroCombo}
                value={primeiroValor}
                required={true}
            />

            <ListaSuspensa
                label="Segundo Combo"
                itens={opcoesSegundoCombo}
                aoAlterado={aoAlterarSegundoCombo}
                value={segundoValor}
                required={true}
                disabled={!segundoComboHabilitado} // Desabilita dinamicamente
            />
        </div>
    );
};

export default App;

E também da pra fazer usando um outro hook do React, o useEffect:

import React, { useState, useEffect } from 'react';
import ListaSuspensa from './ListaSuspensa';

const App = () => {
    const [primeiroValor, setPrimeiroValor] = useState('');
    const [segundoValor, setSegundoValor] = useState('');
    const [opcoesSegundoCombo, setOpcoesSegundoCombo] = useState([]);
    const [segundoComboHabilitado, setSegundoComboHabilitado] = useState(false);

    const opcoesDinamicas = {
        Categoria1: ['Opção 1A', 'Opção 1B', 'Opção 1C'],
        Categoria2: ['Opção 2A', 'Opção 2B', 'Opção 2C'],
        Categoria3: ['Opção 3A', 'Opção 3B', 'Opção 3C'],
    };

    useEffect(() => {
        if (primeiroValor) {
            setOpcoesSegundoCombo(opcoesDinamicas[primeiroValor] || []);
            setSegundoComboHabilitado(true); // Habilita o segundo combo
        } else {
            setOpcoesSegundoCombo([]);
            setSegundoComboHabilitado(false);
            setSegundoValor(''); 
        }
    }, [primeiroValor]); // toda vez que essa variável mudar, esse código será executado

    const aoAlterarPrimeiroCombo = (valorSelecionado) => {
        setPrimeiroValor(valorSelecionado);
    };

    const aoAlterarSegundoCombo = (valorSelecionado) => {
        setSegundoValor(valorSelecionado);
    };

    return (
        <div>
            <h1>Seleção Dinâmica com Lista Suspensa (useEffect)</h1>

            <ListaSuspensa
                label="Primeiro Combo"
                itens={['Categoria1', 'Categoria2', 'Categoria3']}
                aoAlterado={aoAlterarPrimeiroCombo}
                value={primeiroValor}
                required={true}
            />

            <ListaSuspensa
                label="Segundo Combo"
                itens={opcoesSegundoCombo}
                aoAlterado={aoAlterarSegundoCombo}
                value={segundoValor}
                required={true}
                disabled={!segundoComboHabilitado} // Desabilita dinamicamente
            />
        </div>
    );
};

export default App;