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

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