React Css in JS で 選択候補を表示させたい

前提・実現したいこと

ReactのCSS で下記のように、選択項目を表示できるようにしたいです。

Css in JSを使って、Reactで開発練習をしています。(React 初心者です)

動画が送れないので、
zipファイルにしました。(1週間有効)

目指したい状態

現状の状態

発生している問題・エラーメッセージ

動画のように、選択項目が自動的に表示されない。(文字の条件に値するCSS が選択候補として表示されない)

試したこと

該当のソースコード

React

1import React from 'react' 2 3const Footer = () => { 4 return ( 5 <div> 6 <footer className ="footer"> 7 8 </footer> 9 </div> 10 ) 11} 12 13export default Footer 14

CSS

1.footer {2 color: aqua;3 background-color: aliceblue;4}

補足情報（FW/ツールのバージョンなど）

下記のサイトを調べ「Emmet」の設定や
ColorPickerのインストールは行いましたが、
うまくできません。

[React カラーピッカー1](https://engineer-blog.ajike.co.jp/react_color_picker/) [React カラーピッカー2](https://www.sukerou.com/2022/09/react-color.html) [styled.componentsなどのCSSの種類](https://ramble.impl.co.jp/1414/#toc4) [React Emmet](https://qiita.com/genie-oh/items/bf5380a6e8fc464a9cd8) [標準化されていない Emmert CSS 設定](https://qiita.com/Mr_ozin/items/d7fb30ed56347f6d222e)

ずっと、解決できていない部分です。いつも、直打ちをしてしまっているので、
どうしても解決したいです。

ご存知の方がいましたら、お力をいただけると幸いです🙏