Radio Button clicked value get the previous clicked value React - reactjs

Question

I have MUI radio buttons which I use to get filter criteria and I filter an object. Then i render the filtered object in an owl carousal to show. But when I click on a radio button it always takes the previously clicked value of the radio button. I have used ternary conditions to check but it keeps happening I couldb't figure out following is my code.
<FormControl>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
value={movieType}
onChange={movieTypeChange}
>
<FormControlLabel
value="1"
control={<Radio color="error" />}
label="All"
/>
<FormControlLabel
value="2"
control={<Radio color="error" />}
label="Now Showing"
/>
<FormControlLabel
value="3"
control={<Radio color="error" />}
label="Upcoming"
/>
</RadioGroup>
</FormControl>
{filterdMovie.length > 0 ? (
<OwlCarousel
className="owl-theme"
loop={movieCount}
center={movieCount}
margin={1}
autoplay={true}
dots={false}
items={3}
touchDrag={true}
lazyLoad={true}
responsive={state.responsive}
// responsive={"0:{items:1,},600:{items:3,},1000:{items:5,}"}
animateOut={"fadeOut"}
>
{filterdMovie.map((movieBannertop, idx) => {
return (
<div key={idx}>
<div className="item">
<div className="prs_upcom_movie_box_wrapper">
<div className="prs_upcom_movie_img_box">
<img
src={
movieBannertop.thumbnail
// HTMLImageElement.complete
// ?
// `${process.env.REACT_APP_DEV_BASE_URL_IMAGE}/movie/${movieBannertop.id}/thumbnail.jpg`
// : placeholder
}
alt="movie_img"
/>
<div className="prs_upcom_movie_img_overlay"></div>
<div className="prs_upcom_movie_img_btn_wrapper">
<ul>
<li>
{movieBannertop.bookingOpen ? (
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
More Info
</a>
) : null}
</li>
<li>
{!movieBannertop.upcoming ? (
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
Now Showing
</a>
) : (
<a
href
style={{
textDecoration: "none",
backgroundColor: "#2488ed",
}}
onClick={() => viewMovie(movieBannertop)}
>
Coming Soon
</a>
)}
</li>
</ul>
</div>
</div>
<div className="prs_upcom_movie_content_box">
<div className="prs_upcom_movie_content_box_inner">
<Tooltip title={movieBannertop.name}>
<h2>
<a
href
onClick={() => viewMovie(movieBannertop)}
style={{ textDecoration: "none" }}
>
{" "}
{movieBannertop.name.length > 10
? `${movieBannertop.name.substring(0, 10)}...`
: movieBannertop.name}
</a>
</h2>
</Tooltip>
<p>{movieBannertop.genre}</p>
</div>
<div className="prs_upcom_movie_content_box_inner_icon">
{/* <ul>
<li>
<a href="movie_booking.html">
<i className="flaticon-cart-of-ecommerce"></i>
</a>
</li>
</ul> */}
</div>
</div>
</div>
</div>
</div>
);
})}
</OwlCarousel>
) : (
<>
<Stack
direction="column"
justifyContent="center"
alignItems="center"
>
<img src={notFound} alt="" width="50%" />
<h4>No Movies Found</h4>
</Stack>
</>
)}
const movieTypeChange = (e) => {
e.preventDefault();
setMovieType(e.target.value);
const value = e.target.value;
if (value === "1") {
setFileredMovies(onlineMovies);
}
if (value === "2") {
let shows = [];
onlineMovies.forEach((element) => {
if (!element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
console.log(shows);
}
if (value === "3") {
console.log("3");
let shows = [];
onlineMovies.forEach((element) => {
if (element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
};

Answer 1

const movieTypeChange = (e) => {
var shows = [];
const value = e.target.value;
if (value === "1") {
setFileredMovies(onlineMovies);
}
if (value === "2") {
onlineMovies.forEach((element) => {
if (!element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
if (value === "3") {
onlineMovies.forEach((element) => {
if (element.upcoming) {
shows.push(element);
}
});
setFileredMovies(shows);
}
setMovieType(value);
};