Unit Control crashes with certain units

[TimothyBJacobs]

Description

The <UnitControl> component does not escape the units used to build the firstCharacters regular expression, see

gutenberg/packages/components/src/unit-control/index.tsx

Line 82 in 9a6958e

return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];

This causes the component to crash with RegExp syntax errors like Nothing to repeat when units are used that contain regex control characters.

There is a escapeRegExp helper that I think could be applied to the first character value.

This looks to be a bug introduced in #39303.

Step-by-step reproduction instructions

1. Use the UnitControl in a block or any React environment with the following code.

<UnitControl
	value={value}
	onChange={onChange}
	units={[
		{
			label: '+',
			value: '+',
		},
		{
			label: '-',
			value: '-',
		},
	]}
/>

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg 16.1
• Firefox

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes