style-component props와 typescript

매우 간단한 컴포넌트 하나를 만들고 있었다.

import { useEffect, useRef, useState } from "react";
import NavBar from "../util/NavBar";
import {
  StudentInfoContainer,
  StudentProfile,
  DivideLine,
  DropDown,
  DropDownContents,
} from "./studentListStyleComponent";
const StudentInfo = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <>
      <NavBar />
      <StudentInfoContainer>
        <StudentProfile />
        <h1 style={{ display: "inline-block" }}>김민아</h1>
        <span>3학년A반</span>
        <DivideLine />
        <div>
          <div style={{ float: "left" }}>총 0건</div>
          <DropDown 
            onClick={() => {
              setToggle(true);
            }}
          >
            <span>사전평가</span>
            <DropDownContents toggle={toggle}>
              <p>사후평가</p>
            </DropDownContents>
          </DropDown>
        </div>
      </StudentInfoContainer>
    </>
  );
};
export default StudentInfo;

하지만 toggle에서 오류가 떴다. 내용은 뭘까?

이 호출과 일치하는 오버로드가 없습니다.
오버로드 1/2('(props: { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }): ReactElement<...>')에서 다음 오류가 발생했습니다.
'{ children: Element; toggle: boolean; }' 형식은 'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }' 형식에 할당할 수 없습니다.
'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }' 형식에 'toggle' 속성이 없습니다.
오버로드 2/2('(props: StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never, "div", "div">, string | JSXElementConstructor<...>>')에서 다음 오류가 발생했습니다.
'{ children: Element; toggle: boolean; }' 형식은 'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }' 형식에 할당할 수 없습니다.
'IntrinsicAttributes & { slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLDivElement | null) => void) | RefObject<...> | null | undefined; ... 251 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; } & { ...; } & { ...; }' 형식에 'toggle' 속성이 없습니다.ts(2769)

....?리액트로 개발하다가 이렇게 많은 오류를 본 건 처음이다. 보아하니 오버로드 정의가 안돼 있어서 정의하란 뜻일텐데... 정의를 해줘 보았다.

const DropDownContents = styled.div<display:boolean>`
 display: ${(props) => (props.toggle ? "blodk" : "none")};
 position: absolute;
 background: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 padding: 12px 16px;
 z-index: 1;
`;

안된다. 왜 안될까? 정말 간단한 건데 30분 째 못찾았다. 옛날 롯데월드 오락실에서 틀린그림찾기 레벨1에서 광탈하고 울었던 기억이 난다.

const DropDownContents = styled.div<{toggle:boolean}>`
 display: ${(props) => (props.toggle ? "blodk" : "none")};
 position: absolute;
 background: #f9f9f9;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
 padding: 12px 16px;
 z-index: 1;
`;

props.toggle이니까 비구조화 할당을 해야한다.... ㅠㅠㅠ