I am using @mui/x-date-pickers and @date-io/date-fns to create a DatePicker. I am following this guide and this guide on how to get the correct modules installed, but I am presented with the following errors when I import the required modules to render a date picker.

Here are my imports:

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

And the DatePicker:

        return (
            <LocalizationProvider dateAdapter={AdapterDateFns}>
                <DatePicker
                    label={title}
                    value={value}
                    onChange={(e) => {
                        setDetails((prev) => {
                            const update = [...prev.fields];
                            update[index] = {
                                ...update[index],
                                Value: e.target.value,
                            };
                            return { ...prev, fields: update };
                        });
                        renderInput={(params) => <TextField {...params} />}
                    }}
                />
            </LocalizationProvider>
        );