In React, When I close the modal, I cannot scroll down/up - reactjs

Question

I am just getting started learning React with Function Component and Styled-Components. I created Modal Component and when I clicked the modal it shows up and I cannot scroll down/up(Background) but when I close the modal, I cannot scroll. I expect it should be work when I close the modal. Could you help me with what part something wrong?
const [showModal, setShowModal] = useState(false);
const [active, setActive] = useState(true);
const openModal = active => {
setShowModal(prev => !prev);
if (active) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
};
<ShowAllSizes>
<AllSize>모든 사이즈</AllSize>
<FaRegArrowAltCircleDown // isActive={active} onClick={()=> openModal}
className="FaIconModal"
/>
<Modal showModal={showModal} setShowModal={setShowModal} />
</ShowAllSizes>
I will leave the whole code just in case
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { FaRegArrowAltCircleDown } from 'react-icons/fa';
import { Modal } from './components/Modal';
export default function ColumnTop() {
const [showModal, setShowModal] = useState(false);
const [active, setActive] = useState(true);
const openModal = active => {
setShowModal(prev => !prev);
if (active) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
};
return (
<RightSideSection>
<ColumnTopSection>
<TitleBox>
<BrandName>Jordan</BrandName>
<EngName>Jordan 1 Retro High OG Bordeaux</EngName>
<KrName>조던 1 레트로 하이 OG 보르도</KrName>
</TitleBox>
<FigureWrap>
<DetailSize>
<SizeInKorean>사이즈</SizeInKorean>
<ShowAllSizes>
<AllSize>모든 사이즈</AllSize>
<FaRegArrowAltCircleDown
// isActive={active}
onClick={() => openModal}
className="FaIconModal"
/>
<Modal showModal={showModal} setShowModal={setShowModal} />
</ShowAllSizes>
</DetailSize>
<DetailPrice>
<TransactionPriceKorean>최근 거래가</TransactionPriceKorean>
<PriceInfo>
<CurrentPrice>248,000</CurrentPrice>
<PricePunctuation>6000원(-2.4%)</PricePunctuation>
</PriceInfo>
</DetailPrice>
<ButtonWrapper>
<Button>
<ButtonDivision>
<LeftSide>
<BtnTitle to="/order">구매</BtnTitle>
</LeftSide>
<RightSide>
<OrderPrice>23500원</OrderPrice>
<OrderStatusName>즉시 구매가</OrderStatusName>
</RightSide>
</ButtonDivision>
</Button>
<Button primary>
<ButtonDivision>
<LeftSide>
<BtnTitle to="/order">판매</BtnTitle>
</LeftSide>
<RightSide>
<OrderPrice>11500원</OrderPrice>
<OrderStatusName>즉시 판매가</OrderStatusName>
</RightSide>
</ButtonDivision>
</Button>
</ButtonWrapper>
</FigureWrap>
</ColumnTopSection>
</RightSideSection>
);
}
const ShowAllSizes = styled.div``;
const RightSideSection = styled.div`
padding-left: 40px;
`;
const ColumnTopSection = styled.div`
display: flex;
flex-direction: column;
`;
const TitleBox = styled.div`
display: flex;
flex-direction: column;
`;
const BrandName = styled.span`
display: inline-block;
vertical-align: top;
line-height: 19px;
padding-top: 1px;
margin-bottom: 9px;
font-size: 18px;
font-weight: 800;
border-bottom: 2px solid #222;
width: 61px;
height: 21px;
`;
const EngName = styled.span`
margin-bottom: 4px;
font-size: 18px;
font-weight: 400;
`;
const KrName = styled.span`
line-height: 17px;
font-size: 14px;
color: rgba(34, 34, 34, 0.5);
`;
const FigureWrap = styled.div`
width: 500px;
`;
const DetailSize = styled.div`
padding-top: 19px;
padding-bottom: 12px;
border-bottom: 1px solid #ebebeb;
`;
const SizeInKorean = styled.span`
padding-top: 4px;
display: inline-block;
line-height: 16px;
font-size: 13px;
color: rgba(34, 34, 34, 0.8);
`;
const AllSize = styled.span`
display: inline-block;
margin-right: 5px;
margin-left: 392px;
font-size: 18px;
`;
const FaIconModal = styled.button``;
const DetailPrice = styled.div`
display: flex;
margin-top: 4px;
`;
const TransactionPriceKorean = styled.span`
position: absolute;
width: 60px;
padding-top: 5px;
height: 7px;
font-size: 13px;
color: rgba(34, 34, 34, 0.8);
`;
const PriceInfo = styled.div`
display: flex;
flex-direction: column;
margin-left: 330px;
`;
const CurrentPrice = styled.span`
margin-left: 100px;
margin-top: 4px;
`;
const PricePunctuation = styled.span`
color: #31b46e;
margin-left: 110px;
`;
const ButtonWrapper = styled.div`
margin-top: 15px;
`;
const ButtonDivision = styled.div`
display: flex;
`;
const Button = styled.button`
background: ${props => (props.primary ? '#41B979' : '#EF6253')};
width: 235px;
height: 40px;
margin-right: 15px;
padding: 0 10px;
border: none;
border-radius: 5px;
`;
const LeftSide = styled.div`
margin-top: 3px;
left: 5px;
`;
const BtnTitle = styled(Link)`
font-weight: bold;
color: #fff;
text-decoration: none;
`;
const RightSide = styled.div`
margin-left: 10px;
border-left: 1px solid silver;
color: #fff;
`;
const OrderPrice = styled.div`
margin-left: 10px;
`;
const OrderStatusName = styled.div`
margin-left: 20px;
`;
This is my Modal Component
import React, { useRef, useState, useEffect, useCallback } from 'react';
import styled from 'styled-components';
import { MdClose } from 'react-icons/md';
export const Modal = ({ showModal, setShowModal }) => {
const modalRef = useRef();
const [detailPageData, setDetailPageData] = useState([]);
useEffect(() => {
fetch(`/data/detailPageData.json`)
.then(res => res.json())
.then(data => setDetailPageData(data.result.price_by_size));
}, []);
const closeModal = e => {
if (modalRef.current === e.target) {
setShowModal(false);
}
};
const keyPress = useCallback(
e => {
if (e.key === 'Escape' && showModal) {
setShowModal(false);
}
},
[setShowModal, showModal]
);
useEffect(() => {
document.addEventListener('keydown', keyPress);
return () => document.removeEventListener('keydown', keyPress);
}, [keyPress]);
// console.log(setDetailPageData);
return (
<div>
{showModal ? (
<Background onClick={closeModal} ref={modalRef}>
<ModalWrapper showModal={showModal}>
<SizeModalContent>
<Title>사이즈</Title>
<ButtonWrapper>
{detailPageData.map(({ id, title, price }) => {
return (
<Button key={id}>
<Size>{title}</Size>
<Price>{price}</Price>
</Button>
);
})}
</ButtonWrapper>
</SizeModalContent>
<CloseModalButton
aria-label="Close modal"
onClick={() => setShowModal(prev => !prev)}
/>
</ModalWrapper>
</Background>
) : null}
</div>
);
};
const Background = styled.div`
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
left: -0px;
top: -0px;
background: rgba(0, 0, 0, 0.8);
z-index: 10;
`;
const ModalWrapper = styled.div`
width: 400px;
height: 400px;
background: #fff;
color: #000;
border-radius: 10px;
`;
const SizeModalContent = styled.div`
margin-left: 20px;
margin-right: 20px;
`;
const Title = styled.div`
margin: 15px;
font-weight: 700;
color: #000;
text-align: center;
`;
const ButtonWrapper = styled.div`
margin: 10px 0px;
display: grid;
grid-template-columns: repeat(3, 33%);
`;
const Button = styled.button`
width: 100px;
height: 35px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid #d3d3d3;
border-radius: 10px;
background-color: #fff;
`;
const Size = styled.span`
display: block;
font-weight: 700px;
`;
const Price = styled.span`
color: red;
`;
const CloseModalButton = styled(MdClose)`
cursor: pointer;
position: absolute;
top: 350px;
right: 800px;
font-size: 20px;
/* top: -50px;
right: -360px;
width: 32px;
height: 32px; */
`;
Edit1: Copy and Past my Modal.js