gatsby-plugin-sass not applying autoprefix for flex on IE 11

[jjbully]

Description

the gatsby-plugin-sass doesn't apply autoprefixer for flex or not at all on IE11 and other browser

Steps to reproduce

clone the starter from https://github.com/gatsbyjs/gatsby-starter-hello-world

npm install

npm install sass gatsby-plugin-sass

Include the plugin in your gatsby-config.js file.
plugins: [gatsby-plugin-sass]

change the code in
src/pages/index.js

import React from "react"

import './index.scss'

export default function Home() {
  return (
    <div className="outter">
      <div>Hello world!</div>
    </div>
  )
}

change the code in
src/pages/index.scss

.outter {
  height: 500px;
  width: 100%;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

gatsby develop

Expected result

on the IE11
the resulted css should be like the following

.outter {
  height: 500px;
  width: 100%;
  background-color: skyblue;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

Actual result

nothing has changed in the IE

.outter {
  height: 500px;
  width: 100%;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: macOS 10.15.7
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.16.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 89.0.4389.90
Edge: 86.0.622.43
Firefox: 86.0
Safari: 14.0.1
npmPackages:
gatsby: ^3.0.1 => 3.1.1
gatsby-plugin-postcss: ^4.1.0 => 4.1.0
gatsby-plugin-sass: ^4.1.0 => 4.1.0
npmGlobalPackages:
gatsby-cli: 2.14.0