Проблема с возвратом компонента в react. Помогите кто может

хочу сделать что-то по типу списка фильмов, которые задаю в массиве, но не получается.

всегда либо просто белый фон, либо он же, но только с ошибкой

App.jsx:

import './App.css'
import { AllView } from './AllView'

function App() {
  return (
    <>
    <AllView/>
    </>
  )
}

export default App

Массив, в котором содержится информация о фильмах:

export let filmsData = [
    {
        name: 'Death book', 
        year: 2007,
        censure: '16+',
        country: 'Japan',
        time: '145min'
    },
    {
        name: '1+1',
        year: 2012,
        censure: '12+',
        country: 'USA',
        time: '120min'
    },
    {
        name: 'Gran Turismo',
        year: 2023,
        censure: '18+',
        country: 'USA',
        time: '134min'
    },
    {
        name: 'Matrix',
        year: 1991,
        censure: '18+',
        country: 'USA',
        time: '120min'
    }
]

Компонент, с которым как раз таки и проблемы:

import { filmsData } from './filmsData'

export function AllView() {
    return (
    function ChangeOutput(name, year, censure, country, time) {
        return (
            <div>
                <h3>{name}</h3>
                <br />
                <h5>{year}</h5>
                <h5>{censure}</h5>
                <br />
                <h4>{country}</h4>
                <h4>{time}</h4>
            </div>
        );
    }

    function ChangeInput() {
        for (let i = 0; i < filmsData.length; i++) {
            ChangeOutput(filmsData[i].name, filmsData[i].year, filmsData[i].censure, filmsData[i].country, filmsData[i].time);
        }
    }

    ChangeInput();
    )
}