I had a problem exporting NavBottom and I don't understand why the problem is that when I insert it into a component it knocks out an error, but the import and export are correct. Maybe there are nuances when using TypeScript, I recently started using it. I will be glad for any answer to my problem. Maybe I must "open" do object ?

TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & boolean'.
  Type '{}' is not assignable to type 'true'.
    46 |         <div />
    47 |       </StyledBurger>
  > 48 |       <NavBottom  />
       |        ^^^^^^^^^
    49 |     </>
    50 |   )
    51 | }

import React, { useState } from 'react';
const styled = require('styled-components');
import {NavBottom} from './NavBottom';  

const BurgerMenu = () => {

  const [open, setOpen] = useState(false)

  const StyledBurger = styled.div`
  width: 2rem;
  height: 16px;
  margin-top:16px;
  margin-left: 19px;
  position: fixed;
  z-index: 20;
  display: none;
    display: flex;
    justify-content: space-around;
    flex-flow: column nowrap;
  div {
    width: 18px;
    height: 2px;
    background-color: #fff;
    border-radius: 10px;
    transform-origin: 1px;
    transition: all 0.3s linear;
    &:nth-child(1) {
      transform: ${open ? 'rotate(45deg)' : 'rotate(0)'};
    }
    &:nth-child(2) {
      transform: ${open ? 'translateX(100%)' : 'translateX(0)'};
      opacity: ${open ? 0 : 1};
    }
    &:nth-child(3) {
      transform: ${open ? 'rotate(-45deg)' : 'rotate(0)'};
    }
  }
`;

interface Props {
  open: boolean;
}
  
  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>
      <NavBottom open={open} />
    </>
  )
}

export {BurgerMenu};