пытается отобразить кнопку для портала в реакции и получить эту ошибку: × TypeError: Object (...) не является функцией стиля modalwrapper

Question

Я создал портал для отображения сообщения.Пришло время компиляции. Я получаю сообщение об ошибке на ModalWrapper и не могу понять это.Все технологии установлены и обновлены.я могу импортировать и экспортировать по-разному, может показаться, что это понятно.

import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import  Portal  from './Portal';
import  absolute  from './elevation';
import  Card  from './Card';
import { Transition, animated } from 'react-spring/renderprops';





export default class Modal extends Component {
    render() {
      const { children, toggle, on } = this.props;
      return (
        <Portal>
          <Transition
                    native
                    config={{
                    tension: 100,
                    friction: 15
                   }}
                    items={on}
                    from={{ opacity: 0, bgOpacity: 0, y: -50 }}
                    enter={{ opacity: 1, bgOpacity: 0.6, y: 0 }}
                    leave={{ opacity: 0, bgOpacity: 0, y: 50 }}
              >
          {on => on && ((styles) => (
            <ModalWrapper>
          <ModalCard styles={{ 
            transform: 
            styles.y.interpolate(y => `translate3d(0, ${y}, 0)`),
            ...styles }}>
            <CloseButton onClick={toggle}>
              <p>H</p>
            </CloseButton>
            <div>{children}</div>
          </ModalCard>
          <Background  style={{ opacity: styles.bgOpacity.interpolate(bgOpacity => bgOpacity) }} onClick={toggle} 
/>
            </ModalWrapper>
          ))}      
          </Transition>
        </Portal>

      );
    }
  }

const ModalWrapper = styled.div`
  ${absolute({})};
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
   align-items: center;
`;

Answer 1

const ModalWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
   align-items: center;
`;