I can not display data from django rest framework with axios - reactjs

Question

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;