I will need a little time to look at this, but you have your files named .jsx (ie JSX) as opposed to .tsx (TSX)?
I think Experience builder uses Typescript so you may prefere the TSX extension for any UI component and pure libraries as .ts
check your config.json file if it exists, and make sure its not conflicting with the manifest.json for example, make sure it doesn't override or strip out useMapWidgetIds.
You can also use logging of the props and the props.config in Settings.tsx to see if it even receives useMapWidgetIds on render.
Eg:
console.log("Settings panel rendered", props);
In the experience, you'll need to (if you haven't already done so) add a Map Widget dragged onto the page (and a map source set in the settings)
You also need the custom widget dragged onto the page and then once its there if you aren't in 'live mode' you should be able to click on it to see and sett the settings you setup. I need to review the code with a bit more detail than I have time for today to give additional thoughts.