sharepoint framework – Fetching Planner Task through Graph API into webpart

public componentDidMount() {
this.props.context.msGraphClientFactory.getClient().then((client: MSGraphClient): void => {
  client
    .api('me/planner/tasks')
    .version("v1.0")
    .select("*")
    .get((error: any, eventsResponse, rawResponse?: any) => {
      if (error) {
        console.error("message is :" + error);
        return;
      }
      const plannerTask: MicrosoftGraph.Event() = eventsResponse.value;
      this.setState({ events: plannerTask });
    })
  })
  }

Making an API call through Graph Explorer to fetch the Planner Task data into sharepoint webpart in the above function

i am getting an error when fetching the data of “{“Assignments : AssignedBy :User :id”}”

I am fetching data through Graph Explorer as shown below

I am able to fetch the {“CreatedBy : User :id”} but not able to fetch {“Assignments : AssignedBy :User :id”}

I have used that code to fetch the createdBy’s ID and assignedBY’s ID

{this.state.events.map((item, key) =>
            <tr>
              <td id="status">
                {(() => {
                  switch (item.percentComplete) {
                    case 0: return "Not-started";
                    case 50: return "In-Progress";
                    case 100: return "Completed";
                  }
                })()}
              </td>
              <td><a href={"https://tasks.office.com/credentinfotech.com/en-GB/Home/Planner#/plantaskboard?planId=" + item.planId + "&taskId=" + item.id} target="_blank" >{item.title}</a></td>
              <td>{moment(item.startDateTime).format('MM/DD/YYYY ')}</td>
              <td>{moment(item.dueDateTime).format('MM/DD/YYYY')}</td>
              <td>{item.createdBy.user.id}</td>
              <td>{item.assignments.assignedBy.user.id}</td>
              

            </tr>

          )

          }