CSS modules pass property as styles property

I'd like to add a custom class to my Button component in app I'm learning react on.

In my Form.js I have

import React, {Component} from 'react';
import Button from './Button';
import styles from '../css/LoginElements.css';

class Form extends Component {
  render() {

    const click = this.props.onSubmit;

    return(
      <div className={styles.form}>
        <Button
          name="Register"
          className="register"
          onClick={click} />
      </div>
    );
  }
}

export default Form;

And in the Button.js I have

import React from 'react';
import styles from '../css/LoginElements.css';

const Button = ({name, onClick, className }) => (
  <div className={styles.wrapper}>
    <div className="field">
      <div className={className? styles.className : styles.button} onClick={onClick}>{name}</div>
    </div>
  </div>
);

export default Button;

The problem is that styles.className will work if I put .className in my LoginElements.css file, and not .register, as I would like.

What do I need to do to use the class name from the button property as a class? And not just register but so that it's like LoginElements__register__34Kfd (locally scoped)?