Unable to display the data into textfield using redux toolkit

Question

I'm trying to update my data but them problem is unable to display the data into Texfield. But in console log or network the data are display. Please see below my code.

Please anyone help. Thanks

// Update Form

  const { id } = useParams();
  const dispatch = useDispatch();
  const userInfo = useSelector(selectUser);

  const [userData, setUserData] = useState(userInfo);

  useEffect(() => {
    dispatch(getUser(id));
  }, [dispatch, id]);

  useEffect(() => {
    if (userInfo) {
      setUserData(userInfo);
    }
  }, [userInfo]);


<TextField name="name" value={userInfo?.name || ''} />
<TextField name="email" value={userInfo?.email|| ''} />

// User Slice

const userSlice = createSlice({
  name: 'user',
  initialState: userInfo: null,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUser.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(getUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.isError = false;
        state.userInfo = action.payload;
      })
      .addCase(getUser.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
        toast.error(action.payload);
      })

export const selectUser = (state) => state.user.userInfo;