React and Material UI Second Selector contingent on First Selection

I am trying to code my own e-commerce photography website wherein I am looking to sell prints. I have the following code within a dialog component

<form className={classes.formContainter}>
   <FormControl className={classes.formControl}>
      <InputLabel htmlFor="demo-dialog-native">Print Style</InputLabel>
        <Select
        native
        value={style}
        onChange={handleChange}
        input={<Input id="demo-dialog-native" />}>

       <option aria-label="None" value="" />
       {styles.map(style => (
       <option>{images.printStyles}</option>
       ))}</Select>

   </FormControl>
      <FormControl className={classes.formControl}>
         <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>
         <NativeSelect
         defaultValue={0}
         inputProps={{
         name: 'size',
        id: 'uncontrolled-native',}}>

        <option value="">{''}</option>
        {styles.map(style => (
        <option>{style.size}</option>))}

    </NativeSelect>

The props are calling from some backend scheme brought into using axios

const [styles, setStyles] = useState([]);

useEffect(() => {
    const fetchStyles = async () => {
        const { data } = await axios.get('/api/printStyle');

        setStyles(data);
    };
    fetchStyles();
}, []);

Functionally I want to know if there is a way to minimize schema so when a customer selects 'Canvas' under print style, they are greeted with size options in the second drop down that is relevant to the 'Canvas' print style. Such as a conditional rendering statement that says "If style.print === 'Canvas' then show Canvas sizes else show all options". My knowledge just isn't keen on coding something like that yet and am unsure how to find resources regarding this specific issue.

Here is some of the Schema.js code

const images = [
{
    _id: '1',
    name: 'Floe Peak',
    location: 'Floe Lake',
    province: 'British Columbia',
    category: 'Out of Province Travels',
    categorydescription:
        'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    image: '/images/1.jpg',
    description:
        'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, ex!',
    printStyles: ['Metallic Paper, Canvas, Aluminum'],
    price: '$55',
},

I guess as compendium to this question, is there a way to map through an array inside an object to product 3 separate categories. So when I map through printStyles it creates 3 options rather than just a string?

please help