Select Value Not Submitting

Actually I’m converting default woocommerce sorting select to M3 Web Select. Here is code,

https://material-web.dev/components/select/

<form class="woocommerce-ordering" method="get">
	<md-outlined-select form name="orderby" class="orderby" aria-label="<?php esc_attr_e( 'Shop order', 'woocommerce' ); ?>">
		<?php foreach ( $catalog_orderby_options as $id => $name ) : ?>
			<md-select-option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>>
				<div slot="headline"><?php echo esc_html( $name ); ?></div>
			</md-select-option>
		<?php endforeach; ?>
	</md-outlined-select>
	<input type="hidden" name="paged" value="1" />
	<?php wc_query_string_form_fields( null, array( 'orderby', 'submit', 'paged', 'product-page' ) ); ?>
</form>

this code render select perfectly but after selecting it’s not submiting it’s value.

Here is woocommerce default sorting select which is working fine

<form class="woocommerce-ordering" method="get">
	<select name="orderby" class="orderby" aria-label="<?php esc_attr_e( 'Shop order', 'woocommerce' ); ?>">
		<?php foreach ( $catalog_orderby_options as $id => $name ) : ?>
			<option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>><?php echo esc_html( $name ); ?></option>
		<?php endforeach; ?>
	</select>
	<input type="hidden" name="paged" value="1" />
	<?php wc_query_string_form_fields( null, array( 'orderby', 'submit', 'paged', 'product-page' ) ); ?>
</form>