I can not display data from django rest framework with axios

I am still new. I am making my portfolio.But I got problem. I am trying to get data from django rest framework with axios. It says I got no error. I want to display the data in cards components. But still it does not show data in the browser. How can I solve this problem?

Thank you in advance.

//App.tsx

const App: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState<EventProps[]>([]);
  const url = "http://127.0.0.1:8000/events/lists/";
  

  useEffect(() => {
    const getEventsData = async () => {
      try {
        const res = await axios.get<EventProps[]>(url).then((res) => {

          setResults(res.data);
          setLoading(true);
          // console.log(res.data.results.event_id);
          console.log(res);
          console.log(res.data);
        });
      } catch (err) {
        console.log(err);
      }
    };
    
    getEventsData();
  }, []);

  return (
    <>
      <div className="wholeheader">
        <MantineProvider
          inherit
          theme={{ defaultGradient: { from: "blue", to: "teal", deg: 20 } }}
        >
          <Group position="apart" grow>
            <Center
              sx={(theme) => ({
                height: 170,

                backgroundImage: theme.fn.gradient(),
                color: theme.white,
              })}
            >
              <Logo />

              <div className="header">
                <HeaderTabsColored {...HeaderProps} />
                <LoginAndRegiInHeader />
              </div>
              <div className="searchbar">
                <SearchBar />
              </div>
            </Center>
          </Group>
        </MantineProvider>
      </div>
      {loading ? (
        <Fragment>loading..</Fragment>
      ) : (
        Object.values(results).map((result: EventProps) => (
          <EventsCard
            key={result.event_id}
            event_id={result.event_id}
            title={result.title}
            description={result.description}
            dateTime={result.dateTime}
            capacity={result.capacity}
            EventImage1={result.EventImage1}
            EventImage2={result.EventImage2}
            EventImage3={result.EventImage3}
            location={result.location}
            host={result.host}
          />
        ))
      )}
      <br />
      <br />
      <Page />

    </>
  );
};

export default App;

//Events.tsx

[data in the browser][1]
import { EventProps } from "../types/EventsProps";
import { Grid } from "@mantine/core";
import axios from "axios";
import { ThemeContext } from "@emotion/react";
import eventImage from "../Images/Events/eventImage.jpg";

const useStyles = createStyles((theme) => ({
  card: {
    backgroundColor:
      theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
  },

  section: {
    borderBottom: `1px solid ${
      theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
    }`,
    paddingLeft: theme.spacing.md,
    paddingRight: theme.spacing.md,
    paddingBottom: theme.spacing.md,
  },

  like: {
    color: theme.colors.red[6],
  },

  label: {
    textTransform: "uppercase",
    fontSize: theme.fontSizes.xs,
    fontWeight: 700,
  },
}));

// {EventImage1, EventImage2, EventImage3, event_id, location, description, capacity, title, host,dateTime}:
const EventsCard: React.FC<EventProps> = (props) => {
  const { classes, theme } = useStyles();
  const [opened, setOpened] = useState(false);

  return (
    
      <Grid>
        <Grid.Col span={4} key={props.event_id}>
          <Card withBorder radius="md" p="md" className={classes.card}>
            <Card.Section>
              <Image
                className="image"
                src={props.EventImage1}
                alt={props.title}
                height={300}
                width={342}
              />
              <Image
                className="image"
                src={props.EventImage2}
                alt={props.title}
                height={300}
                width={342}
              />
              <Image
                className="image"
                src={props.EventImage3}
                alt={props.title}
                height={300}
                width={342}
              />
            </Card.Section>

            <Card.Section className={classes.section} mt="md">
              <Group position="apart">
                <Text size="lg" weight={800}>
                  {props.title}
                  <br />
                  {props.dateTime}
                </Text>
                <Badge size="sm">{props.location}</Badge>
              </Group>
              <Text size="lg" weight={500}>
                定員:{props.capacity}名
              </Text>
              <Text size="sm" mt="xs">
                {props.description}
              </Text>
            </Card.Section>

            <Card.Section className={classes.section}>
              <Text mt="md" className={classes.label} color="dimmed">
                host
              </Text>

              <Text size="sm">{props.host}</Text>
            </Card.Section>
          </Card>
        </Grid.Col>
      </Grid>
    
  );
};
export default EventsCard;