Как в форме сделать доступность к селекту (альбомы) только после выбора артиста?

Имеется форма:

    import React, {
        useEffect,
        useState,
    } from 'react';
    
    import {
        useDispatch,
        useSelector,
    } from 'react-redux';
    
    import {
        Button,
        Grid,
    } from '@material-ui/core';
    
    import { fetchAlbums } from '../../store/actions/albumActions';
    import { fetchArtists } from '../../store/actions/artistsActions';
    import FormElment from '../UI/FormElement/FormElement';
    
    const AlbumForm = props => {
        const [state, setState] = useState({
            title: "",
            album: "",
            duration: "",
            numbering: ""
        });
      
        const dispatch = useDispatch();
        const artists = useSelector(state => state.artists.artists);
        const albums = useSelector(state => state.albums.albums);
      
        const inputChangeHandler = e => {
            const {name, value} = e.target;
            setState(prevState => {
                return {...prevState, [name]: value};
            });
        };
    
        useEffect(() => {
            dispatch(fetchArtists());
            dispatch(fetchAlbums());
        }, [dispatch]);
    
        const formSubmitHandler = e => {
            e.preventDefault();
            const formData = new FormData();
            Object.keys(state).forEach(key => {
                formData.append(key, state[key]);
            
            });
            props.onSubmit(formData);
        };
    
        return (
            <form onSubmit={formSubmitHandler}>
                <Grid container direction="column" spacing={2}>
                    <FormElment 
                        name={"title"}
                        required={true}
                        label={"Track title"}
                        value={state.title}
                        onChange={inputChangeHandler}
                        type={"input"}
                    />
                    <FormElment 
                        label="Track artist"
                        name="artist"
                        onChange={inputChangeHandler}
                        value={state.artist}
                        options={artists}
                        type={"select"}
                    />
                    <FormElment 
                        required={true}
                        label="Track album"
                        name="album"
                        onChange={inputChangeHandler}
                        value={state.album}
                        options={albums}
                        type={"select"}
                    />
                    <FormElment 
                        name={"duration"}
                        required={true}
                        label={"Track duration"}
                        onChange={inputChangeHandler}
                        value={state.duration}
                        type={"input"}
                    />
                    <FormElment 
                        required={true}
                        label="Track numbering"
                        name="numbering"
                        onChange={inputChangeHandler}
                        value={state.numbering}
                        type={"input"}
                    />
                    <Grid item>
                        <Button type="submit" color="primary">
                            Create
                        </Button>
                    </Grid>
                </Grid>
            </form>
        );
    };
      
    export default AlbumForm;

как сделать доступ к селекту album только после сделанного выбора в селекте artist. В селекте albums должны быть толлько альбомы данного артиста.

это страница с формой:

    import React from 'react';
    
    import { useDispatch } from 'react-redux';
    
    import { Typography } from '@material-ui/core';
    
    import TrackForm from '../../components/TrackForm/TrackForm';
    import { createTrack } from '../../store/actions/tracksActions';
    
    const NewTrack = props => {
        const dispatch = useDispatch();
        const formSubmitHandler = async track => {
            await dispatch(createTrack(track));
            props.history.push("/");
    };
    
      
    
        return (
            <>
                <Typography variant="h4">
                    New Track
                </Typography>
                <TrackForm onSubmit={formSubmitHandler} />
            </>
        );
    };
    
    export default NewTrack;

это trackActions:

    import axios from '../../axios-music';
    import {
        CREATE_TRACK_SUCCESS,
        FETCH_TRACKS_SUCCESS,
    } from '../actionTypes';
    
    const fetchTracksSuccess = tracks => {
        return {type: FETCH_TRACKS_SUCCESS, tracks};
    };
    
    export const fetchTracks = (albumId) => {
        const id = albumId;
        return async (dispatch) => {
            try {
                const response = await axios.get(`/tracks?album=${id}`);
                dispatch(fetchTracksSuccess(response.data));
            } catch (err) {
                console.log(err);
            }
        };
    };
    
    const createTrackSuccess = () => {
        return {type: CREATE_TRACK_SUCCESS};
    };
      
    export const createTrack = track => {
        return async (dispatch) => {
            try {
                await axios.post("/tracks", track);
                dispatch(createTrackSuccess());
            } catch(e) {
                console.log(e);
            }
        };
    };

albumsActions:

    import axios from '../../axios-music';
    import {
        CREATE_TRACK_SUCCESS,
        FETCH_TRACKS_SUCCESS,
    } from '../actionTypes';
    
    const fetchTracksSuccess = tracks => {
        return {type: FETCH_TRACKS_SUCCESS, tracks};
    };
    
    export const fetchTracks = (albumId) => {
        const id = albumId;
        return async (dispatch) => {
            try {
                const response = await axios.get(`/tracks?album=${id}`);
                dispatch(fetchTracksSuccess(response.data));
            } catch (err) {
                console.log(err);
            }
        };
    };
    
    const createTrackSuccess = () => {
        return {type: CREATE_TRACK_SUCCESS};
    };
      
    export const createTrack = track => {
        return async (dispatch) => {
            try {
                await axios.post("/tracks", track);
                dispatch(createTrackSuccess());
            } catch(e) {
                console.log(e);
            }
        };
    };

artistActions:

    import axios from '../../axios-music';
    import {
        CREATE_ARTIST_SUCCESS,
        FETCH_ARTISTS_SUCCESS,
    } from '../actionTypes';
    
    const fetchArtistsSuccess = artists => {
        return {type: FETCH_ARTISTS_SUCCESS, artists};
    };
    
    export const fetchArtists = () => {
        return async dispatch => {
            try {
                const response = await axios.get("/artists");
                dispatch(fetchArtistsSuccess(response.data));
            } catch(e) {
                console.log(e);
            }
        };
    };
    
    const createArtistSuccess = () => {
        return {type: CREATE_ARTIST_SUCCESS};
    };
    
    export const createArtist = artist => {
        return async (dispatch) => {
            try {
                await axios.post("/artists", artist);
                dispatch(createArtistSuccess());
            } catch(e) {
                console.log(e);
            }
        };
    };

это FormElement

    import React from 'react';
    
    import PropTypes from 'prop-types';
    
    import {
      Grid,
      MenuItem,
      TextField,
    } from '@material-ui/core';
    
    const FormElment = (props) => {
        let textFieldChildren = null
        if (props.type === "select") {
            textFieldChildren = props.options.map((options) => {
                return <MenuItem 
                    selected={options._id === "609a8b0fded55ecf1319479e"} 
                    key={options._id} 
                    value={options._id}
                >
                    {options.title}
                </MenuItem>
            })
        }
    
        return (
            <Grid item xs={12}>
                <TextField
                    variant="outlined"
                    fullWidth
                    required={props.required}
                    id={props.name}
                    select={props.type === "select"}
                    type={props.type}
                    multiline={props.multiline}
                    rows={3}
                    label={props.label}
                    name={props.name}
                    autoComplete={props.name}
                    value={props.value}
                    onChange={props.onChange}
                    error={!!props.error}
                    helperText={props.error}
                >
                    {textFieldChildren}
                </TextField>
            </Grid>
        );
    };
    
    FormElment.propTypes = {
        name: PropTypes.string.isRequired,
        label: PropTypes.string.isRequired,
        value: PropTypes.string.isRequired,
        onChange: PropTypes.func.isRequired,
        type: PropTypes.string.isRequired,
        required: PropTypes.bool,  
        multiline: PropTypes.bool,
        error: PropTypes.string,
        options: PropTypes.arrayOf(PropTypes.object)
    };
    
    export default FormElment;