TS RadioGroup returns type string on change handler rather than array of possible strings

I have an interface defined as so:

export interface StopData {
    stopName: string,
    stopType: 'stop' | 'waypoint'

I have a radio group for selecting the ‘stopType’, with two radio buttons. One with the value ‘stop’ and one with ‘waypoint’.

My onChange handler in the radio group looks like so: onChange={event => stopData['stopType'] = event.target.value} However I’ve got a TS error:
Type ‘string’ is not assignable to type ‘”stop” | “waypoint”‘

So even though I only have two radio buttons that match the strings my interface defines, the radiogroup still considers the type of event.target.value to be “any” rather than “‘stop’ | ‘waypoint’

How do I update stopData[stopType] without changing my interface to accept stopType: string. (Bonus if I can wrap them both updaters into the same change handler)

FYI: I’m using React, TS and MaterialUI for my tech stack.

The whole (relevant) code is as follows:

export default function CreateTripStop(stopData: StopData) {
    return (
        <Box className={classes.flexContainer}>
            <TextField label='Stop Name' placeholder='Cupola Hut' name='stopName'
                onChange={event => stopData['stopName'] = event.target.value} />
            <RadioGroup row name='stopType' defaultValue="stop"
                onChange={event => stopData['stopType'] = event.target.value}>
                    control={<Radio color="primary" />}
                    control={<Radio color="primary" />}


Just update like this:

onChange={event => stopData['stopType'] = event.target.value as StopData["stopType"]}