FontSizePicker in the TypographyPanel uses font size value instead of the slug

Description

When you have two font sizes with the same value but different slugs, selecting the second item will automatically select the first matching font value.

This is problematic when you use fluid typography for example there is one font size with a value of 1rem it's max value is 1rem and min value is 0.875rem and there is another font size with a value of 1rem it's max value is 1rem and min value is 0.5rem in that case the current implementation doesn't work.

Step-by-step reproduction instructions

In theme.json add the following font size preset

{
"fluid": {
    "min": "0.5rem",
    "max": "1rem"
},
"size": "1rem",
"slug": "x-small"
},
{
"fluid": {
    "min": "0.875rem",
    "max": "1rem"
},
"size": "1rem",
"slug": "small"
},

Try selecting small font size in editor it will select x-small always.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress version: Latest

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

[X] Yes

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

[X] Yes

WordPress / gutenberg