Arrow function is null inside tagged template literal function

I’m trying to decipher how styled components work. I get most parts, but interpolations.
Consider this component:

const display = 'flex'

const Container = styled.div`
  background-color: red;
  color: ${(props) => props.color};
  display: ${display};
`

The function that receives the styles is something like this:

const styled = {
   div: (string, ...values) => {
      return ({children, ...props}) => {
        const styles = tag(string, props, ...values);
        return <div style={styles}>{children}</div>
      }
    }
}

string in this case is: ["n background-color: red;n color: ",";n display: ",";n"]

values are logged as: [null,"flex"]

The first interpolation (the arrow function) is null.

How does styled-components manage to solve this?