Hello all.. i need help in react-data-grid function - reactjs

Question

import logo from './logo.svg';
import './App.css';
import React, { useRef, useState } from 'react';
import "react-data-grid/lib/styles.css";
import DataGrid, { textEditor } from "react-data-grid";
import {Calendar } from "react-calendar";
const DatePicker = () => {
  const [date, setDate] = useState('');
  const dateInputRef = useRef(null);
  const handleChange = (e) => {
    setDate(e.target.value);
  };
const validateEmail = value => {
if (!value) return "Email is required";
if (!/^[a-zA-Z0-9]+#[a-zA-Z0-9]+\.[A-Za-z]+$/.test(value))
return "Invalid email address";
};
//The error has been fixed.
const columns = [
{ key: "id", name: "ID",editor:textEditor },
{ key: "date", name: "Date",editor:textEditor },
{ key: "email", name: "email",editor:textEditor,validate:validateEmail},
];
const rows = [{ id: 0, date: "2023-01-02", email: "jane#example.com" }];
function App() {
return <DataGrid columns={columns} rows={rows} />;
}
);
//export default App;
  return (
    <div>
      <input
        type="date"
        onChange={handleChange}
        ref={dateInputRef}
      />
      <p>Selected Date: {date}</p>
    </div>
  );
};`enter code here`
export default DatePicker;`
Hello world, i creat a script for get date.but When I click on date my calendar not come out plese solve my problem. I add my code here and add image.This code i run in termux and my all packages is installed in device