no entiendo porque no me funciona 😦 cuando hago hover me salta este error. ThemeProvider: “theme” prop is required. <code>// App.js impo...

no entiendo porque no me funciona 😦 cuando hago hover me salta este error.

ThemeProvider: “theme” prop is required.

fullscreen
// App.js

import React from "react";
import { Theme } from "./Theme";
import { Title } from "./Title";
import Form from "./form";

const movies = [
  {
    name: "Avengers",
    available: 5
  },
  {
    name: "Thor",
    available: 3
  }
];

export default function App() {
  const [theme, setTheme] = React.useState("Avengers");

  return (
    <Theme theme={theme}>
      <Title>Películas</Title>
      {movies.map((movie) => (
        <Form movie={movie} updateTheme={() => setTheme(movie.name)} />
      ))}
    </Theme>
  );
}


// GlobalStyle.js
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
  html,
  body {
    background: ${(p) => p.theme.bg}
  }
`;

// Theme.js 

import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "./GlobalStyle";

const themes = {
  avengers: {
    bg: "#ceceff",
    color: "#335",
    color2: "rgba(5, 5, 100, 0.5)"
  },
  terminator: {
    bg: "#ccffcc",
    color: "#010",
    color2: "rgba(50, 100, 50, 0.5)"
  }
};

export const Theme = (props) => (
  <ThemeProvider theme={themes[props.theme.toLowerCase()]}>
    <GlobalStyle />
    {props.children}
  </ThemeProvider>
);


// form.js 

import React from "react";
import styled from "styled-components";

const StyledForm = styled.form`
  font-family: courier;
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: transform 0.3s;

  &:hover {
    transform: scale(1.2);
  }
`;

const StyledButton = styled.button`
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid transparent;
  transition: 0.15s border-color;

  &:hover {
    border-color: ${(p) => p.theme.color2};
  }

  &[disabled] {
    background: ${(p) => p.theme.color2};
  }
`;

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;

  return (
    <StyledForm onMouseEnter={() => props.updateTheme()}>
      <h3>{movie.name}</h3>
      <StyledButton
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity <= 0}
      >
        -
      </StyledButton>
      {quantity}
      <StyledButton
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.available}
      >
        +
      </StyledButton>
    </StyledForm>
  );
}