How to keep OpenLayers.StyleMap and OpenLayers.SelectFeature from conflicting?

I have an OpenLayers.Layer.Vector layer, something like this:

layer = new OpenLayers.Layer.Vector("zzzzz", {
  strategies: [
    new OpenLayers.Strategy.Fixed(),
  ],
  // styleMap: new OpenLayers.StyleMap({
  //   'default': { .. layer styles here ..}
  //   'select': { .. selected styles here ..}
  // }),
  protocol: new OpenLayers.Protocol.HTTP({
    url: "/kml/zzzzzz.kml",
    renderers: ['Canvas','SVG'],
    format: new OpenLayers.Format.KML({
      extractStyles: false, 
      extractAttributes: true,
      maxDepth: 0
    })
  })
});

Then I have an OpenLayers.Controls.SelectFeature control, something like this:

selectFeature = new OpenLayers.Control.SelectFeature(
    [layer],
    {
      renderIntent: "select",
      clickout: true,
      toggle: true
    }
);

Then, I add it to the map, like so:

map = new OpenLayers.Map('map');
map.addLayer(layer);
map.addControl(selectFeature);
selectFeature.activate();

Now, the instant that I uncomment those styleMap lines, all of my features become unclickable and unresponsive. Not only do the styles not reflect the state, but the states don't seem to be changing at all.

What do I need to do to maintain custom styles AND have the layers be hoverable and/or clickable?