Im attempting to build a website using Material-UI and React. When attempting to use Material-UI's styling via the Hook API, it works online in codesandbox.io but does not work locally when I run it. The border radius property does not seem to update, nor do any of the properties in the button or instruction object

import React from 'react';

import { makeStyles } from '@material-ui/styles';

import Stepper from '@material-ui/core/Stepper';

import Step from '@material-ui/core/Step';

import StepLabel from '@material-ui/core/StepLabel';

import Button from '@material-ui/core/Button';

import Typography from '@material-ui/core/Typography';



const useStyles = makeStyles({

  root: {

    width: 100%

  },

  button: {

    marginRight: 10,

    borderRadius: 100,

    fontSize: 20,

  },

  instructions: {

    marginTop: 2,

    marginBottom: 5

  }

});



function getSteps() {

  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];

}



function getStepContent(step) {

  switch (step) {

    case 0:

      return 'Select campaign settings...';

    case 1:

      return 'What is an ad group anyways?';

    case 2:

      return 'This is the bit I really care about!';

    default:

      return 'Unknown step';

  }

}



function HorizontalLinearStepper() {

  const classes = useStyles();

  const [activeStep, setActiveStep] = React.useState(0);

  const [skipped, setSkipped] = React.useState(new Set());

  const steps = getSteps();



  function isStepOptional(step) {

    return step === 1;

  }



  function isStepSkipped(step) {

    return skipped.has(step);

  }



  function handleNext() {

    let newSkipped = skipped;

    if (isStepSkipped(activeStep)) {

      newSkipped = new Set(newSkipped.values());

      newSkipped.delete(activeStep);

    }



    setActiveStep(prevActiveStep => prevActiveStep + 1);

    setSkipped(newSkipped);

  }



  function handleBack() {

    setActiveStep(prevActiveStep => prevActiveStep - 1);

  }



  function handleSkip() {

    if (!isStepOptional(activeStep)) {

      // You probably want to guard against something like this,

      // it should never occur unless someone's actively trying to break something.

      throw new Error(You can't skip a step that isn't optional.);

    }



    setActiveStep(prevActiveStep => prevActiveStep + 1);

    setSkipped(prevSkipped => {

      const newSkipped = new Set(prevSkipped.values());

      newSkipped.add(activeStep);

      return newSkipped;

    });

  }



  function handleReset() {

    setActiveStep(0);

  }



  return (

    <div className={classes.root}>

      <Stepper activeStep={activeStep}>

        {steps.map((label, index) => {

          const stepProps = {};

          const labelProps = {};

          if (isStepOptional(index)) {

            labelProps.optional = <Typography variant=caption>Optional</Typography>;

          }

          if (isStepSkipped(index)) {

            stepProps.completed = false;

          }

          return (

            <Step key={label} {...stepProps}>

              <StepLabel {...labelProps}>{label}</StepLabel>

            </Step>

          );

        })}

      </Stepper>

      <div>

        {activeStep === steps.length ? (

          <div>

            <Typography className={classes.instructions}>

              All steps completed - you&apos;re finished

            </Typography>

            <Button onClick={handleReset} className={classes.button}>

              Reset

            </Button>

          </div>

        ) : (

          <div>

            <Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>

            <div>

              <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>

                Back

              </Button>

              {isStepOptional(activeStep) && (

                <Button

                  variant=contained

                  color=primary

                  onClick={handleSkip}

                  className={classes.button}

                >

                  Skip

                </Button>

              )}

              <Button

                variant=contained

                color=primary

                onClick={handleNext}

                className={classes.button}

              >

                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}

              </Button>

            </div>

          </div>

        )}

      </div>

    </div>

  );

}



export default HorizontalLinearStepper;

You can view the expected results here: https://98m6j7m314.codesandbox.io
in which the buttons border is circular after applying the borderRadius property