The parameter's value don't display with TS - react-typescript

Question

Goal:
Display the parameter's value in the webpage when you click on the text "DetailView"
Problem:
The value don't display and I am not sure if this tis the correct error for this case.
"The 'jsxFragmentFactory' compiler option must be provided to use JSX fragments with the 'jsxFactory' compiler option.(17016)"
How should I solve it?
Thank you!
Stackblitz:
https://stackblitz.com/edit/react-router-typescript-example-asrnpk?
Other info:
*Newbie in react TS
----------------------------
import * as React from 'react';
import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { render } from 'react-dom';
import { Home, Foo, Bar } from './Pages';
import DetailView from './DetailView';
import './style.css';
class App extends React.Component {
render() {
return (
<Router>
<div>
<nav>
<Link to="/">Home</Link>
<br />
<Link to="/foo">Foo</Link>
<br />
<Link to="/bar">Bar</Link>
<br />
<Link to="/detailview/3}">DetailView</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/foo" element={<Foo />} />
<Route path="/bar" element={<Bar />} />
<Route path="/detailview/:p1?" element={<DetailView />} />
</Routes>
</div>
</Router>
);
}
}
render(<App />, document.getElementById('root'));
----------------
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
interface MatchParams {
id: string;
}
interface Props extends RouteComponentProps<MatchParams> {
// ...
}
const DetailView: React.FC<Props> = ({ match }: Props): JSX.Element => {
const params = match.params;
return <>{`Test "${params.id}"`}</>;
};
export default DetailView;
-------------------
import React from 'react';
export const Home = () => <h1>Home Page</h1>;
export const Foo = () => <h1>Foo Page</h1>;
export const Bar = () => <h1>Bar Page</h1>;