import { MuiPickersUtilsProvider } from '@material-ui/pickers'; でエラーが出る

概要

Material-UIのdate-pickerを使うために、公式ドキュメントの通り実装しようとしたところ、
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
を記述した時点でエラーが出てしまいました。
どのようにして解決すれば良いのかわからないため、教えていただきたいです。

ソースコード

react
1import styled from "styled-components";
2import { useState } from "react";
3import { MuiPickersUtilsProvider } from '@material-ui/pickers';
4
5const Container = styled.div`
6  position: fixed;
7  top: 0;
8  z-index: 20;
9  width: 100%;
10  height: 50px;
11  display: flex;
12  border-bottom: 1px solid #dcdcdc;
13  display: flex;
14  justify-content: center;
15  align-items: center;
16  background-color: #ffff;
17  @media(min-width: 600px) {
18    height: 70px;
19  }
20`;
21
22const Prev = styled.i`
23  font-size: 25px;
24  margin-right: 10px;
25  cursor: pointer;
26`;
27
28const Next = styled.i`
29  font-size: 25px;
30  cursor: pointer;
31`;
32
33const Day = styled.div`
34  margin: 0 40px;
35  color: #0d0d0d;
36`;
37
38const Calendar = styled.i`
39  font-size: 20px;
40  cursor: pointer;
41`;
42
43const Header = (props) => {
44
45  return (
46    <Container>
47      <Prev
48        className="fas fa-angle-left"
49        onClick={() => props.changeDay("prev")}
50      >
51      </Prev>
52      <Next
53        className="fas fa-angle-right"
54        onClick={() => props.changeDay("next")}
55      >
56      </Next>
57    </Container>
58  );
59
60}
61
62export default Header;

エラーメッセージ

./node_modules/@material-ui/core/esm/Button/index.js
Error: ENOENT: no such file or directory, open '/Users/k20081kk/App-Project/Kiroku/client/node_modules/@material-ui/core/esm/Button/index.js'