Parsing error in react with style-components - reactjs

Question

I'm creating a light/dark mode switch in React with this tutorial - Tutorial Link
After adding GlobalStyles from styled-components even that I was doing all according to tutorial I receive this error:
./src/Components/Global.js
Line 13:40: Parsing error: Unterminated template
11 | align-items: center;
12 | background: ${({ theme }) => theme.body};
> 13 | color: ${({ theme }) => theme.text};
| ^
14 | display: flex;
15 | flex-direction: column;
16 | justify-content: center;
Here is code from Global.js
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
align-items: center;
background: ${({ theme }) => theme.body};
color: ${({ theme }) => theme.text};
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
transition: all 0.25s linear;
}
And here is my App.js
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { GlobalStyles } from './Components/Global';
import { ThemeProvider} from 'styled-components';
import { lightTheme, darkTheme} from './Components/Theme'
function App() {
return (
<ThemeProvider theme={lightTheme}>
<>
<GlobalStyles />
<button>Toggle theme</button>
<h1>It's a light theme!</h1>
<footer>
</footer>
</>
</ThemeProvider>
);
}
export default App;
Question: How I can fix that error and did I miss something in syntax which leads to this error?