Не могу понять, как использовать функцию из файла .tsx в файле .jsx

решил попробовать написать простенькую страничку Todo. Использую библиотеку react, chakra-ui и ещё typescript Создал файл Home.tsx, в нём прописал функцию TodoList, в ней основная логика работы.

Содержимое файла Home.tsx:

import React, { useState, useEffect } from "react";
import { useLocalStorage } from "react-use";
import { List, ListItem } from "@chakra-ui/react";

interface Todo {
  id: string;
  text: string;
}

const TodoList = () => {
    const [todos, setTodos] = useState<Todo[]>([]);

    useEffect(() => {
        const localStorageTodos = useLocalStorage<Todo[]>("todos");
        setTodos(localStorageTodos ? localStorageTodos : []);
    }, []);

    const handleAddTodo = (todo: Todo) => {
        setTodos([...todos, todo]);
        localStorage.setItem("todos", JSON.stringify(todos));
    };

    const handleRemoveTodo = (id: string) => {
        setTodos(todos.filter((todo) => todo.id !== id));
        localStorage.setItem("todos", JSON.stringify(todos));
    };

    return (
        <div>
            <h1>Todo List</h1>
            <List>
                {todos.map((todo) => (
                    <ListItem key={todo.id}>
                        {todo.text}
                        <button onClick={() => handleRemoveTodo(todo.id)}>
                            Удалить
                        </button>
                    </ListItem>
                ))}
            </List>
            <input
                type="text"
                placeholder="Добавить задачу"
                onChange={(e) => handleAddTodo({
                    id: Date.now().toString(),
                    text: e.target.value,
                })}
            />
        </div>
    );
};

export default TodoList;

Далее написал файл Home.jsx, который содержит функцию Home, которая использует этот TodoList.

Вот содержимое файла Home.jsx:

import { TodoList } from './Home.tsx'


export const Home = () => {
    return(
        <div>
            <TodoList />
        </div>
    )
}

Потом всё это импортировал в файл index.jsx, где прописал роуты.

index.jsx:

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Home } from './Home'

export const Pages = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
            </Routes>
        </BrowserRouter>
    )
}

А в html файл импортируется уже такой скрипт, который по идее должен всё отрисовывать.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import { Pages } from './pages/index.jsx'


ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <ChakraProvider>
            <Pages />
        </ChakraProvider>
    </React.StrictMode>
)

Но когда запускаю с помощью yarn start и перехожу в корень, то в браузере пустая страница. В консоли увидел вот такую ошибку:

SyntaxError: The requested module '/src/pages/Home.tsx' does not provide an export named 'TodoList' (at Home.jsx:3:10)

Не могли бы вы мне объяснить как правильно использовать то, что я описал в .tsx файле.