Toggling a boolean for brand selection. Once nativeSelect a category, only the brand selection images will appear

Is it possible to implement a value={values[“brandCategory”]}, onChange , boolean true false in renderBrandSelection so that when a specific brand is clicked then the brandselection appears.I dont know where the onChange should be implemented at

  const renderBrandCategorySelection = () => {
return(
  <div className={classes.input}>
    <Typography variant="body1">
      <FormattedMessage id="vcn.sub.customisation.brandCategory.label" />
    </Typography>
    <NativeSelect
      name={"brandCategory"}
      value={values["brandCategory"]}
      onChange={handleCategoryChange.bind("brandCategory")}
      inputProps={{
        name: "brandCategory",
        id: "brand-native-label-placeholder",
      }}
      fullWidth
      error={touched["brandCategory"] && Boolean(errors["brandCategory"])}
    >
      <FormattedMessage id="vcn.sub.customisation.brandCategory.placeholder">
        {(pleaseSelect) => <option value="" disabled hidden>{pleaseSelect}</option>}
      </FormattedMessage>
      {renderBrandCategoryOptions()}
    </NativeSelect>
    {touched["brandCategory"] && errors["brandCategory"] && (
      <FormHelperText
        error={touched["brandCategory"] && Boolean(errors["brandCategory"])}
      >
        <FormattedMessage id={errors["brandCategory"]} />
      </FormHelperText>
    )}
  </div>
)

}

const renderBrandCategoryOptions = () => {
const brandCategoryOptions = brandCategoryList.map((input, id) => {
return (
<option id={“brandCategoryOption” + id.toString()} value={input.uuId} key={input.uuId}>
{input.categoryName}

);
});
return brandCategoryOptions;
}

const renderBrandSelection = () => {
return (

{!!applicableBrands.length > 0 ? (
applicableBrands.map((data, i) => {
return(
<div
id={“brandSelection” + i.toString()}
key={“brand-selection-” + i.toString()}
name={“brandSelection” + i.toString()}
className={
classes.customSelectionElements + ” ” +
(values[“brandName”] === data.uuId ? classes.activeSelect : “”)
}
style={{background: data.cardColorCode}}
onClick={() => handleBrandChange(data)}
>

{values[“brandName”] === data.uuId ?

: null}

)
})
) : (

)}

{touched[“brandName”] && errors[“brandName”] && (
<FormHelperText
error={touched[“brandName”] && Boolean(errors[“brandName”])}
>
<FormattedMessage id={errors[“brandName”]} />

)}

)
}