Issue with data to be displayed based on filter in reactjs

I am a new in reactjs and getting issue with data to be displayed based on loaded from server and filtered based on some tags.

The issue is data getting returned in the array map. But, not making it displayed to the elements.
I have created the codes in below link.

https://codepen.io/ssubham/pen/abLaodV

The codes are as :-

import React, {useState, useCallback, useEffect} from 'react';
import Axios from "axios";
import { Container, Grid, Stack, Typography, Button } from "@mui/material";
import moment from "moment";

import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

import {} from "./CourseContent.css";

const CourseContent = (props) => {
  const [courseData, setCourseData] = useState([]);
  const [programLevel, setProgramLevel] = useState({
    level: "personal",
    learning: "beginner"
  });

  // Filtering data based on level and learning state to view in Carousel.
  const filterCourseData = useCallback((pData, tempCourseData) => {
    console.log("filterCourseData ", tempCourseData.length);
    if (tempCourseData.length > 0) {
      const subCourseData1 = tempCourseData.filter((program) =>
        program.level.find(
          (items) =>
            Object.keys(items)[0] === pData.level &&
            Object.values(items)[0].find((items1) => items1 === pData.learning)
        )
      );
      setCourseData(subCourseData1);
      return subCourseData1;
    }
  }, []);

  // Fetching data from database to view.
  const fetchCourses = useCallback(() => {
    Axios.get(`https://demo.qortechno.com/api/v1/courses`)
      .then((response) => {
        if (response.data.success) {
          //console.log("coursecontent ",response.data.data)
          filterCourseData(programLevel, response.data.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }, [programLevel]);

  useEffect(() => {
    fetchCourses();
  }, [fetchCourses]);

  return (
    <Container>
      <Grid className={"courseMaterial"} sx={{ display: "flex", marginTop: 7 }}>
         <OwlCarousel
            navText={[
              "<i class='fas fa-chevron-left'></i>",
              "<i class='fas fa-chevron-right'></i>"
            ]}
            className="owl-theme owl-carousel" items={1} loop margin={10} nav dotsContainer="false"
 responsiveClass>
            {
              courseData.map((item, index) => {
console.log(item);
                return (
                  <div key={index}>
                    <Typography variant="h5" gutterBottom> {item.name} </Typography>
                    <Stack spacing={1} style={{ marginTop: "1.5em" }}>
                      <Typography variant="h5">{item.deliverymode}</Typography>
                      <Typography variant="h5"> {item.duration} Weeks
                      </Typography>
                    </Stack>
                  </div>
                );
              })
            }
          </OwlCarousel>
      </Grid>
    </Container>
  );
};

export default CourseContent;

Thanks…