CSS Modules is not working in functional component Help?????

i am facing issue when i am trying to scope css file to specific component in case of class component its working fine by following this article https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

but in functional component this approach is not working

here is some my application details
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"

here is my component
import React, { Component } from 'react';
import LS from './Layout.module.css';
// import './Layout.css'
import Aux from '../../hoc/Aux';

// const layout = (props) => (
//
// Toolbar Sidebar BackDrop
//
// {props.children}
//
//
// );

class layout extends Component {
render() {
return (

Toolbar Sidebar BackDrop

{this.children}


);
}
}
export default layout;

when i apply class approach the css is only scope to the layout file but i want to use finctional component but the scope css is not working when i use functional component