How do I use material ui date clicker on a regular css element?

Question

https://codesandbox.io/s/busy-glitter-butkvc?file=/src/App.js:0-977

Basically, I have this table

  <div className="table">
      <div className="headers">
        <span>column 1</span>
        <span>column 2</span>
        <span>end date</span>
        <span>column 4</span>
        <span>column 5</span>
        <span>column 6</span>
      </div>

      <span>row 1</span>
      <span>row 1</span>
      <span className="date">3/18/2022</span>
      <span>row 1</span>
      <span>row 1</span>
      <span>row 1</span>

      <span>row 1</span>
      <span>row 1</span>
      <span className="date">3/25/2022</span>
      <span>row 1</span>
      <span>row 1</span>
      <span>row 1</span>
    </div>

I want to click on the date cell and have the date picker box open and let me choose a date. I looked through material ui and found date picker but it seems to only be used on textfield. Any way to achieve the on click if i were to click on the span element ?

Something like this but start time not needed just the date

Answer 1

Managed to figure it out by trying out props from the doc and some css

  const [date, setDate] = React.useState(new Date());
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    console.log(date);
    setOpen(false);
  }, [date]);

  const openDatePicker = () => {
    setOpen(true);
  };

using the props open and display: none on the textfield

<LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
      open={open}
      value={date}
      onChange={(newValue) => setDate(newValue)}
      renderInput={(params) => (
        <TextField {...params} style={{ display: "none" }} />
      )}
    />
</LocalizationProvider>

https://codesandbox.io/s/busy-glitter-butkvc?file=/src/App.js:270-514

However, preferably I wanted it like a drop down, not to side. Not sure if MUI can do that though.