i have a buttongroup from Material UI, and the code is here

  const [currentProjectSelect, setCurrentProjectSelect] = useState(null);

This is my state.

        <ButtonGroup size="small" className={classes.projectTypeButton}>
         {projectType === 'offPlatform' && projectTypeValues.map((element, index) =>
          <Button 
            key={element.value}
            variant="contained" 
            color="primary"
            className={[classes.budgetButton, {backgroundColor: currentProjectSelect === index ? '#315FFF' : '#fff'}]}
            onClick={() => {
              if (currentProjectSelect === null){
                form.budget_type = element.value
                setCurrentProjectSelect(element.name)
              }
              else {
                setCurrentProjectSelect(null)
              }
            }
            }
          >{element.name}</Button>
        )}
      </ButtonGroup>

Here in the className I am trying to implement a logic where selected button will have different background color. It is not working. I used to be react native developer and the same logic used to work in styles.