Render Not Defined - Keyframed text with React and MUI

I'm trying to get text to scroll one line at a time. What I have is a name, pronouns, and than some very humble sub-text.

The sub text is suppose to scroll one item in at a time and continuously rotate between each of the items.

I've created a seperate component TitleScroll.jsx to manage the scrolling that will go in to Hero.jsx

I keep getting a Render Not Defined error, but am unsure if I should even be using Render or if I should be using Return instead. Someone able to explain what I am doing wrong, and how I can correct this?

Hero.jsx

import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import TitleScroll from "./TitleScroll";

const Hero = () => {
  return (
    <Grid
      component="section"
      container
      flexDirection="row"
      justifyContent="space-between"
      alignItems="center"
      sx={{
        position: "relative",
        height: "100vh",
        width: "100vw",
        overflow: "hidden",
        zIndex: -100,
        mb: 15,
      }}
    >
      <Box
        padding={50}
        sx={{
          height: "50%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <Typography
          component="h2"
          color="secondary"
          sx={{ fontSize: 30, fontWeight: 300 }}
        >
          Hi, my name is
        </Typography>
        <Box>
          <Typography sx={{ fontSize: 60, pt: -40 }}>Ainsley</Typography>
          <Typography sx={{ fontWeight: 200 }}>(they/them)</Typography>
        </Box>
        <Box component="div" sx={{ height: 50, overflow: "hidden" }}>
          <Box component="div" sx={{ height: "100%" }}>
            <TitleScroll />
          </Box>
        </Box>
      </Box>
      <Box>
        <Typography component="h2" color="secondary" gutterBottom>
          Hi Im Ainsley!
        </Typography>
      </Box>
    </Grid>
  );
};

export default Hero;

TitleScroll.jsx

import { keyframes, css } from "@emotion/react";
import Typography from "@mui/material/Typography";
import React from "react";

const TitleScroll = keyframes`
    20% {
        transform: translateY(-50px);
    }

    40% {
        transform: translateY(-100px);
    }

    60% {
        transform: translateY(-150px);
    }

    80% {
        transform: translateY(-200px);
    }

    100% {
        transform: translateY(-250px);
    }
`;

render(
  <div
    css={css`
      animation: ${titleScrollEffect} 2s ease-in-out infinite alternate;
    `}
  >
    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Amazing
    </Typography>

    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Cool
    </Typography>

    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Rad
    </Typography>

    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Neat
    </Typography>

    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Groovy
    </Typography>

    <Typography
      sx={{
        height: 50,
        fontSize: 30,
        fontWeight: "bold",
        display: "flex",
        alignItems: "center",
        color: "#a29bfe",
      }}
    >
      Chill
    </Typography>
  </div>
);

export default TitleScroll;