React-Elastic-Carousel Custom Arrow - reactjs

Question

I wanted to get help for adding custom arrows to my react carousel, but I am getting the error for 'type' is not defined no-undef. Can someone please tell me what I am doing wrong? and preferably a solution for the current situation.
Thank you
import Carousel, { consts } from 'react-elastic-carousel';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'
export default function BootcampNew (props) {
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2 },
{ width: 768, itemsToShow: 3 },
{ width: 900, itemsToShow: 4 },
];
type === consts.PREV;
const myArrow = ({type,onClick, isEdge}) => {
const pointer = type === consts.PREV ? {LeftArrow} : {RightArrow}
return(
<Button onClick={onClick} disabled={isEdge}>{pointer}</Button>
)
}
<Carousel
renderArrow={myArrow}
breakPoints={breakPoints}
pagination={false}>
<CourseCard/>
<Carousel/>

Answer 1

you can't type type === consts.PREV;
without any definition and the only use of it, in this case, is to be inside a condition, the other thing you don't return what's being rendered by the functional component, the below code should solve the problems.
import Carousel, { consts } from 'react-elastic-carousel';
import LeftArrow from './Assets/Group 1316.svg'
import RightArrow from './Assets/Group 1317.svg'
function myArrow({ type, onClick, isEdge }) {
const pointer = type === consts.PREV ? {LeftArrow} : {RightArrow}
return (
<button onClick={onClick} disabled={isEdge}>
{pointer}
</button>
)
}
export default function BootcampNew (props) {
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2 },
{ width: 768, itemsToShow: 3 },
{ width: 900, itemsToShow: 4 },
];
return (
<Carousel renderArrow={myArrow} breakPoints={breakPoints} pagination={false}>
<CourseCard/>
</Carousel>
);
}

Answer 2

const pointer = type === consts.PREV ? : <img src={leftArrow} />:<img src={rightArrow} />