styled-components props 전달

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const ImageSpace = styled.div`
  display: ${(props) => props.num !== props.componentIndex && 'none'};
`; // ${props=>props.num = 0}

const Carousel = (props) => {
  const [num, setNum] = useState(0);

  return (
    <div>
      <div>
        {props.children.props.children.map((v, componentIndex) => (
          <div>
            <ImageSpace num={num} componentIndex={componentIndex}> // state.num = 0, map의 index가 전달 됨
              {v}
            </ImageSpace>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Carousel;