React js Carousel Arrows / position - css

Question

Hello I have difficulty putting my arrows in the center and one on the left and one on the right of my carousel
could someone help me with this?
now i have this
my code:
<Visibility
onBottomPassed={()=>stickTopMenu()}
onBottomVisible={()=> unStickTopMenu()}
once={false}
>
<Grid style={{backgroundColor:'#000',paddingTop:0}}>
<Grid.Row columns={1} style={{padding:0}}>
<Grid.Column style={{padding:0}}>
<ImageCarousel />
</Grid.Column>
</Grid.Row>
</Grid>
</Visibility>
and:
const ImageCarousel = () => (
<CarouselProvider
totalSlides={3}
naturalSlideWidth={1}
naturalSlideHeight={1}
>
<Slider style={{ maxHeight: "500px"}}>
<Slide tag="a" index={0}>
<Image src="https://lorempixel.com/800/800/cats/0" />
</Slide>
<Slide tag="a" index={1}>
<Image src="https://lorempixel.com/800/800/cats/1" />
</Slide>
<Slide tag="a" index={2}>
<Image src="https://lorempixel.com/800/800/cats/2" />
</Slide>
</Slider>
<ButtonBack style={{position: 'absolute', top:' 50%',left: 0,transform: 'translateY(-50%)'}}>Back</ButtonBack>
<ButtonNext style={{position: 'absolute', top:' 50%',left: 0,transform: 'translateY(-50%)'}}>Next</ButtonNext>
</CarouselProvider>
);

Answer 1

Maybe you should add a reference to the parent element. Also, remember you have to transform X and Y
const ImageCarousel = () => (
<CarouselProvider
totalSlides={3}
naturalSlideWidth={1}
naturalSlideHeight={1}
style={{position: "relative" }}
>
<Slider style={{ maxHeight: "500px"}}>
<Slide tag="a" index={0}>
<Image src="https://lorempixel.com/800/800/cats/0" />
</Slide>
<Slide tag="a" index={1}>
<Image src="https://lorempixel.com/800/800/cats/1" />
</Slide>
<Slide tag="a" index={2}>
<Image src="https://lorempixel.com/800/800/cats/2" />
</Slide>
</Slider>
<ButtonBack style={{position: 'absolute', top:'50%',left: 20,transform: 'translate(-50%,-50%)'}}>Back</ButtonBack>
<ButtonNext style={{position: 'absolute', top:'50%',right: 20,transform: 'translate(-50%,-50%)'}}>Next</ButtonNext>
</CarouselProvider>
);