react-bootstrapのテーブルを横スクロールできるようにしたいです

前提・実現したいこと

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

画像のように縦に並んでしまします

また、検証のところを見ると画像のように
-webkit-overflow-scrolling: touch;
が無効な値となっています。

該当のソースコード

　　　　　　　　　　　　<div>
                        
                            <Table striped responsive>
                                <thead>
                                    <tr>
                                        <th>日付</th>
                                        <th>プロジェクト名</th>
                                        <th>入金(出資)</th>
                                        <th>出金(償還・分配)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr key={t.id}>
                <td>
                   2021年01月0４日
                </td>
                <td>
                   ・・・・・・
                </td>
                <td>
                    ￥10,000
                </td>
                <td>
                   -------
                </td>
            </tr>
                                </tbody>
                            </Table>
                        </div>

試したこと

親要素のDivにたいして、

　　　　　　　　　　　　　<div
                            className=''
                            style={{
                                whiteSpace: 'nowrap',
                                overflow: 'auto',
                            }}
                        >

このようにしましたが、変わりませんでした