Получить данные в раскрывающемся списке на основе другого значения раскрывающегося списка

Пример данных API — http://demo6007276.mockable.io/test

У меня есть три раскрывающихся списка:

1. From Release
2. To Release
3. Compatability

Как только я выберу конкретный from release, все to releases, связанные с этим from release, должны быть доступны в раскрывающемся списке To Release, который работает. Теперь я не могу выбрать конкретный to release из раскрывающегося списка To release, и он должен показать свою совместимость в раскрывающемся списке «Совместимость». Вот мой код:

const URL = "http://demo6007276.mockable.io";

export const fetchRelease = async () => {
    try {
        const { data } = await axios.get(`${URL}/test`);
        return data;
    } catch (error) {
        console.info(error);
    }
}

function HomeFragement() {
    const classes = Styles();

    const [releases, setReleases] = React.useState([]);
    const [fromRelease, setFromRelease] = React.useState('Release1');

    const [toRelease, setToRelease] = React.useState('');
    const [compatability, setCompatability] = React.useState('');

    React.useEffect(() => {
        let unmounted = false;
        const handleFetchReleases = async () => {
            const response = await fetchRelease();
            if (!unmounted) {
                setReleases(response);
            }
        }
        handleFetchReleases();
        return () => {
            unmounted = true;
        };
    }, [])

    let tRelease = releases.filter(item => {
        return item.fromRelease === fromRelease
    })

    let compt = releases.filter(item => {
        return item.fromRelease === fromRelease
    })

    const handleChangeEventFromRelease = (e) => {
        setFromRelease(e.target.value);
    }

    const handleChangeEventToRelease = (e) => {
        setToRelease(e.target.value);
    }

    const handleChangeEventCompatability = (e) => {
        setCompatability(e.target.value);
    }

    return (
        <div>
            <Box bgcolor = "#fff" boxShadow = {1} p = {2}>
                <form className = {classes.root} autoComplete = "off">
                    <Grid container spacing = {3}>
                        <Grid item xs = {3}>
                            <InputLabel>From Release</InputLabel>
                            <Select value = {fromRelease} onChange = {(e) => handleChangeEventFromRelease(e)}>
                                {
                                    releases.map((pvalue, i) => {
                                        return <MenuItem key = {i} value = {pvalue.fromRelease}> {pvalue.fromRelease} </MenuItem>
                                    })
                                }
                            </Select>
                        </Grid>

                        <Grid item xs = {3}>
                            <InputLabel>To Release</InputLabel>
                            <Select value = {toRelease} onChange = {(e) => handleChangeEventToRelease(e)}>
                                {
                                    tRelease[0] && tRelease[0].releases.map((pvalue, i) => {
                                        return <MenuItem key = {i} value = {pvalue.toRelease}> {pvalue.toRelease} </MenuItem>
                                    })
                                }
                            </Select>
                        </Grid>

                        <Grid item xs = {3}>
                            <InputLabel>Compatability</InputLabel>
                            <Select value = {compatability} onChange = {(e) => handleChangeEventCompatability(e)}>
                                {
                                    compt[0] && compt[0].releases.map((pvalue, i) => {
                                        return <MenuItem key = {i} value = {pvalue.compatability}> {pvalue.compatability} </MenuItem>
                                    })
                                }
                            </Select>
                        </Grid>                     
                    </Grid>
                </form>
            </Box>
        </div>
    )
}
export default HomeFragement

Любое предложение, пожалуйста?