Calandar avec Synfony UX react

Bonjour à tous, je voudrait faire un date picker avec Sunfony UX react, mais les tuto sont déveloper sur React. Je n'ai pas d'erreur apres la commande npm run watch,
mais le calandar n'apparait pas.
je me suis édre de ce tuto:
https://reactjsexample.com/airbnb-style-date-picker-built-with-react/

Voici mon fichier tailwind.config

/ @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./assets/*/.js",
"./templates//.html.twig",
"./assets/react/controllers/.jsx",
],
theme: {
extend: {},
},
plugins: [],
}

Voici le .jsx que j'ai appeler calandar:

import React from 'react';
import { createRoot } from 'react-dom/client';

import {
DatePicker,
DatePickerProvider,
useDatePickGetter,
useDatePickReset,
} from '@bcad1591/react-date-picker';

const container = document.getElementById('root');
const root = createRoot(container);

function App() {
const { pickedDates } = useDatePickGetter();

const resetFunc = useDatePickReset();

return (
<div>
<DatePicker disablePreviousDays />
<hr />
<div>{pickedDates.firstPickedDate?.toString()}</div>
<div>{pickedDates.secondPickedDate?.toString()}</div>
<button type="button" onClick={resetFunc}>
Reset
</button>
</div>
);
}

root.render(
<DatePickerProvider>
<App />
</DatePickerProvider>,
);

et voici mon twig:

{% extends 'base.html.twig' %}

{% block title %}Hello DateController!{% endblock %}

{% block body %}

<div {{ react_component('Calandar') }}></div>

{% endblock %}
Cordialement