Only be able to edit mapbox-gl-draw shapes when clicked

I am trying to create a web application using mapbox-gl with react. My goal is to have users draw multiple shapes and be able to edit them when desired. However, using map boxes default, a user can edit/move any draw feature inside a Draw componenet. I want the users to be able to edit one shape at a time.

So, in other words if I have shapes 'A' and 'B', I want the user to only be able to edit shape 'A' when they press the "Edit A" button–while not being able to touch shape 'B.'

A solution that may work is if I add individual "Draw" compenents for each shape; however, that seems very inefficient.

One way to solve this to create a custom draw mode based on the direct_select mode where you override the clickInactive() to be a noop function. When the editing starts for a feature, you enter this mode with the feature as the active feature. While the user is making edits, he / she will only be able to edit the target feature.

let modes = MapboxDraw.modes;
modes.custom_select = MapboxDraw.modes.direct_select;
modes.custom_select.clickInactive = () => {};

So, when the user clicks "Edit A" and you call:

drawControl.changeMode(modes.custom_select, featureId: [FEATURE_A_ID])