Try retrieve jss of date field in graphQL instead of value and render the same using .

Sample graphQL call

query RetrieveNavigationLinks($itemPath: String = "/sitecore/Content/TestItems") {
  folderItem: item(path: $itemPath)
  {
    children{
      dateVal: field(name:"dateVal")
      {
        jss
      }
    }
  }
}

Sample rendering

<DateField field={child.dateVal.jss} render={(date) => date.toLocaleDateString()} />

The above change will render date like this,

Try retrieve jss of date field in graphQL instead of value and render the same using .

Sample graphQL call

query RetDates($itemPath: String = "/sitecore/Content/TestItems") {
  folderItem: item(path: $itemPath)
  {
    children{
      dateVal: field(name:"dateVal")
      {
        jss
      }
    }
  }
}

Sample rendering

<DateField field={child.dateVal.jss} render={(date) => date.toLocaleDateString()} />

The above change will render date like this,