React TS Hook code cannot display correctly

Question

Goal:
Display data and its content from Test1.tsx

Problem:
When I apply the code " <Testtest name={name} />" at index.tsx, it mention about "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. "

I don't understand. What part of the code am I missing?

Info:
*Newbie in React TS.

Stackblitz:
https://stackblitz.com/edit/react-ts-nanzy5?

Thank you!

---

index.tsx

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import Testtest from './Test1';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

const App = () => {
  const [name, setName] = useState('default valussse');
  const [name1, setName1] = useState('default valsssue1');

  return (
    <div>
      <Hello name={name} />
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <Hello name={name1} />
      <input value={name1} onChange={(e) => setName1(e.target.value)} />
      <Testtest name={name} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

---

Test1.tsx

import React from 'react';

export const Testtest = ({ name }) => {
  return <h1>Hello {name}!</h1>;
};

---

Hello.tsx

import React from 'react';

export default ({ name }) => <h1>Testtest {name}!</h1>;

---

Answer 1

I think it is because the export from Test1.tsx is not a default export, but you are importing the default in index.tsx.

Try changing line 4 of index.tsx to:

import { Testtest } from './Test1';