How to use the <SelectField> component in the <Authenticator> component for AWS Amplify in React?

I've been trying for ages to put a drop-down/select list in my component in my AWS Amplify ReactJS.

To give a little more context, I've got several mandatory attributes to be able to sign up in AWS Cognito through a custom AWS Amplify login page.

However, I'd like to have a drop-down list for the "locale" attribute in order to send custom messages afterwards according to the filled value.

For now, I got something like this :

import { Authenticator, SelectField } from "@aws-amplify/ui-react";

const LoginPage = () => {

    return (
            <div className="App">
                <Authenticator
                components={{
                    SignUp: {
                        FormFields() {
            
                        return (
                            <>
                                <Authenticator.SignUp.FormFields/>
                                <SelectField
                                    label = "Testing"
                                    isRequired
                                    >
                                    <option value="FR">FR</option>
                                    <option value="EN">EN</option>
                                    <option value="IT">IT</option>
                                </SelectField>
                            </>
                        );
                        },
                    },
                    }}>
                </Authenticator>
            </div>
    );
};

export default LoginPage;

It seems functional if you look at it once it's deployed, but the SelectField isn't mapped to the locale attribute in the end and it just says something like "locale attribute missing, cannot create an account".

How can I make it so it works ? I feel like I got all the ingredients of the recipe but do not have the recipe itself.

Thanks in advance to anyone who will help me !

I know I am a little late to answer. You should add name attribute also in order to send data to aws. name="locale" should work I think.

Updated code below:

import { Authenticator, SelectField } from "@aws-amplify/ui-react";

const LoginPage = () => {

    return (
            <div className="App">
                <Authenticator
                components={{
                    SignUp: {
                        FormFields() {
            
                        return (
                            <>
                                <Authenticator.SignUp.FormFields/>
                                <SelectField
                                    label = "Testing"
                                    name="locale"
                                    isRequired
                                    >
                                    <option value="FR">FR</option>
                                    <option value="EN">EN</option>
                                    <option value="IT">IT</option>
                                </SelectField>
                            </>
                        );
                        },
                    },
                    }}>
                </Authenticator>
            </div>
    );
};

export default LoginPage;