trying to render a button for a portal in react and get this error: × TypeError: Object(...) is not a function on the modalwrapper style

Question

I created a portal to display a message. come compile time i get an error on the ModalWrapper and cannot figure it out. all technologies are installed and up to date. ive imported and exported differently just can seem to figure out.

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;
`;