React material-uiのDateTimePickersの値をパラメーターとして送信したい

前提・実現したいこと

material-uiのDateTimePickersのvalueをパラメーターとして送信したい

ここに質問の内容を詳しく書いてください。
貸会議室の予約サイトを作っています。
予約用フォームとしてモーダルで表示しますが、material-uiのDateTimePickerのvalueを送信するやり方が分かりません。

###解決したいこと
エラーは出ていませんが、予約をするRooms.jsx内メソッドの、submitReserveが走ると、
ディベロッパーツールのNetworkのPreviewで

active: true
build_id: 2
count: 5
created_at: "2021-02-23T01:10:16.925Z"
datetime: null
id: 4
~~以下略~~

のようにDateTimePicerに入力された値であるdatetimeがnullになってしまいます。
これを正常に値が入るようにしたいです。

補足情報（FW/ツールのバージョンなど）

Ruby on rails6
React

該当のソースコード

ruby
1#pre_reserveコントローラー
2    class PreReservesController < ApplicationController
3      before_action :set_room, only: %i[create replace]
4
5      def index
6      ~~~略~~~~
7      end
8
9      def create
10        if PreReserve.active.other_build(@reserved_room.build.id).exists?
11          return render json: {
12            existing_build: PreReserve.other_build(@reserved_room.build.id).first.build.name,
13            new_build: Room.find(params[:room_id]).build.name,
14          }, status: :not_acceptable
15        end
16
17        def replace
18          PreReserve.active.other_build(@oreserved_room.build.id).each do |pre_reserve|
19            pre_reserve.update_attribute(:active, false)
20        end
21  
22          set_pre_reserve(@reserved_room)
23  
24          if @pre_reserve.save
25            render json: {
26              pre_reserve: @pre_reserve
27            }, status: :created
28          else
29            render json: {}, status: :internal_server_error
30          end
31        end
32
33        set_pre_reserve(@reserved_room)
34
35        if @pre_reserve.save
36          render json: {
37            pre_reserve: @pre_reserve
38          }, status: :created
39        else
40          render json: {}, status: :internal_server_error
41        end
42      end
43
44      private
45
46      def set_room
47        @reserved_room = Room.find(params[:room_id])
48      end
49
50      def set_pre_reserve(reserved_room)
51        if reserved_room.pre_reserve.present?
52          @pre_reserve = reserved_room.pre_reserve
53          @pre_reserve.attributes = {
54            count: reserved_room.pre_reserve.count + params[:count],
55            datetime: reserved_room.pre_reserve.datetime,
56            active: true
57          }
58        else
59          @pre_reserve = reserved_room.build_pre_reserve(
60            count: params[:count],
61            datetime: params[:datetime],
62            build: reserved_room.build,
63            active: true
64          )
65        end
66      end
67    end

jsx
1#Rooms.jsx
2#import層略
3
4#初期Stateを設定
5export const Rooms = ({
6  match
7}) => {
8  const history = useHistory();
9  const [roomsState, dispatch] = useReducer(roomsReducer, roomsInitialState);
10  const initialState = {
11    isOpenReserveDialog: false,
12    selectedRoom: null,
13    selectedTimeCount: 1,
14    selectedDatetime: Date.today,
15    isOpenNewReserveDialog: false,
16    existingBuildName: '',
17    newBuildName: '',
18}
19const [state, setState] = useState(initialState);
20  useEffect(() => {
21    dispatch({ type: roomsActionTyps.FETCHING });
22    fetchRooms(match.params.buildsId)
23      .then((data) => {
24        dispatch({
25          type: roomsActionTyps.FETCH_SUCCESS,
26          payload: {
27            rooms: data.rooms
28          }
29        });
30      })
31  }, [])
32
33#登録ボタンを押した時の処理
34const submitReserve = () => {
35    postPreReserve({
36      roomId: state.selectedRoom.id,
37      count: state.selectedTimeCount,
38      datetime: state.selectedDatetime,
39    }).then(() => history.push('/reserves'))
40    .catch((e) => {
41      if(e.response.status === HTTP_STATUS_CODE.NOT_ACCEPTABLE){
42        setState({
43          ...state,
44          isOpenReserveDialog: false,
45          isOpenNewReserveDialog: true,
46          existingBuildName: e.response.data.existing_build,
47          newBuildName: e.response.data.new_build,
48        })
49      } else {
50        throw e;
51      }
52    })
53  };
54~略~
55          <RoomReserveDialog
56            room={state.selectedRoom}
57            isOpen={state.isOpenReserveDialog}
58            countNumber={state.selectedTimeCount}
59               onClickCountUp={() => setState({
60              ...state,
61              selectedTimeCount: state.selectedTimeCount + 1,
62            })}
63            onClickCountDown={() => setState({
64              ...state,
65              selectedTimeCount: state.selectedTimeCount - 1,
66            })}
67
68            #予約時間が入力された際に、stateを上書きする処理
69            handleDateChange={() => setState({
70              ...state,
71              selectedDatetime: state.setDatetime
72            })}
73          
74            onClickReserve={() => submitReserve()}
75            onClose={() => setState({
76              ...state,
77              isOpenReserveDialog: false,
78              selectedRoom: null,
79              selectedDatetime: selectedDatetime
80              selectedTimeCount: 1,
81            })}
82          />

jsx
1#RoomReservationDialog.jsx
2
3~import層略~
4
5export const RoomReserveDialog = ({
6  room,
7  isOpen,
8  onClose,
9  countNumber,
10  onClickCountUp,
11  onClickCountDown,
12  onClickReserve,
13}) => {
14  return (
15~略~
16        <DateTimePickers/>
17~略~
18<ReserveButton onClick={() => onClickReserve()}>
19

jsx
1#DateTimePickers.jsx
2
3const DateTimePickers = () => {
4  const classes = useStyles();
5  const [selectedDatetime, setSelectedDatetime] = useState(Date.today);
6  const handleDateChange = (datetime) => {
7    setSelectedDatetime(datetime);
8  };
9  return (
10    <form>
11      <TextField
12        id="datetime-local"
13        type="datetime-local"
14        value={selectedDatetime}
15        onChange={handleDateChange}
16        className={classes.textField}
17      />
18      </form>
19  );
20}
21
22export default DateTimePickers;

js
1#prereserve.js
2import axios from 'axios';
3import { PreReserve, PreReserveReplace } from '../urls/index'
4
5#axiosを用いてapiを呼ぶ処理
6
7export const postPreReserve =(params) => {
8  return axios.post(PreReserve,
9    {
10      room_id: params.roomId,
11      count: params.count,
12      datetime: params.datetime, #エディタ上で"datetime": Unknownwordと表示されます。ここが原因...??
13    }
14  )
15  .then(res => {
16    return res.data
17  })
18  .catch((e) => { throw e; })
19};

試したこと

DatetimePickers.jsx内でuseStateを用い、関数を渡す処理にしてみましたが、挙動に変化ありませんでした。

お手数をおかけしますがお力添えの方、よろしくお願い致します。

siruku6

2021/02/23 11:40

一見して次の箇所がおかしいのですが、これはソースの通りでしょうか？ # Rooms.jsx #予約時間が入力された際に、stateを上書きする処理 handleDateChange={() => setState({ ...state, selectedDatetime: state.setDatetime })} ①selectedDatetime に state.setDatetime がセットされているが、setDatetimeの戻り値は Datetime？ ②また、そもそも`setDatetime`というメソッドが記述されていない（今回記載していないファイルからimportしているのであれば、②は無視して大丈夫です）